我們如何在陰影DOM中操作

最後更新日期
我們如何在陰影DOM中操作

為何 ShadowDOM 如此重要?

,SEO</a>Angular,技術SEO</a>,使WebJavaScript,學習</a>Shadow DOM: <pre><code>&lt;body&gt;</code></pre> <pre><code>&lt;section id=&quot;root&quot;&gt;</code></pre><pre><code>&lt;/section&gt;</code></pre> <pre><code>&lt;/html&gt;</code></pre> <pre><code>&lt;body&gt;</code></pre> <pre><code>&lt;section id=&quot;root&quot;&gt;</code></pre> <pre><code>&lt;my-web-component&gt;</code></pre><pre><code>&lt;/my-web-component&gt;</code></pre> <pre><code>&lt;/section&gt;</code></pre> <pre><code>&lt;/body&gt;</code></pre> <pre><code>&lt;/html&gt;</code></pre> ,Shadow DOM內容</a> Googlebot,Shadow DOMLight DOM內容</a>GooglebotHTML</a>內容</a>內容</a>HTML</a>,Googlebot - JavaScript SEO基礎知識</a>, 搜尋引擎</a> ,:內容</a>,內容</a>

優勢 劣勢
機會
  • 提供了更靈活的網頁組件開發方式
  • 有助於改善大型web應用程序的管理和開發效率
  • 有潛力成為未來web開發的主流技術
  • 提供了一個隔離的環境,使得開發者可以更容易管理和維護網頁元素
  • 增強了代碼的可重用性和可擴展性
  • 提供了更好的安全性,防止未授權的訪問和修改
威脅
  • 需要對shadow dom的概念和api有深入理解才能使用
  • 某些瀏覽器對shadow dom的支持不完整
  • 增加了網頁複雜性,可能導致性能下降
  • 可能會增加開發成本和學習曲線
  • 在某些舊版本瀏覽器上可能無法正常運行
  • 可能會出現兼容性問題
表: 強弱危機分析(最後更新: 2020-03-13)

可能會出現兼容性問題

,DOMDOMDocument Object ModelDOM<br/><br/>DOM,,,HTML</a>DOM:<br/><br/>HTML</a>(), :GoogleDOM<br/><br/>HTML</a>(DOM)WebDOMHTML</a>DOM,內容</a>

DOM 中有什麼?

DOM,內容</a><br/><br/>1,500DOMDOM<br/><br/>()內容</a>()()<br/><br/>,HTML</a>,搜尋引擎</a>(Google!)DOM

在搜尋控制台視覺化 DOM 樹狀結構

工具</a>,DOM使 Command+Option+J(Mac) Control+Shift+J(WindowsLinuxChrome OS)工具</a>:console.log(document.documentElement.childNodes)<br/><br/> !內容</a><br/><br/>DOM,devTools,,如何</a>DOM!,使<br/><br/>內容</a>

光明與影子的區別

DOM ,Light DOM, Light DOM DOM DOM , Light DOM ()<br/><br/> - , Light DOM Shadow DOM

Shadow DOM 如何被使用?

使DOM(Shadow DOM),<pre><code>&lt;select&gt;</code></pre><pre><code>&lt;video&gt;</code></pre>(,DOM!)電子商務</a>,:<pre><code>&lt;div class=col&gt;</code></pre><pre><code>&lt;h2&gt;</code></pre><pre><code>&lt;a href=thing_1.html class=title&gt;</code></pre>Thing 1<pre><code>&lt;/a&gt;</code></pre><pre><code>&lt;/h2&gt;</code></pre><pre><code>&lt;img src=/thing_1.jpg alt=lovely green thing class=responsive&gt;</code></pre><pre><code>&lt;p&gt;</code></pre>Thing 1 is like Thing 2 but green<pre><code>&lt;/p&gt;</code></pre><pre><code>&lt;a href=thing_1.html class=buttonstyle&gt;</code></pre>Details<pre><code>&lt;/a&gt;</code></pre><pre><code>&lt;button onclick=addtocart(thing1) class=buttonstyle&gt;</code></pre>Buy Now<pre><code>&lt;/button&gt;</code></pre><pre><code>&lt;/div&gt;</code></pre><pre><code>&lt;div class=col&gt;</code></pre><pre><code>&lt;h2&gt;</code></pre><pre><code>&lt;a href=thing_2.html class=title&gt;</code></pre>Thing 2<pre><code>&lt;/a&gt;</code></pre><pre><code>&lt;/h2&gt;</code></pre><pre><code>&lt;img src=/thing_2.jpg alt=lovely red thing&gt;</code></pre><pre><code>&lt;p&gt;</code></pre>Thing 2 is like Thing 1 but red<pre><code>&lt;/p&gt;</code></pre><pre><code>&lt;a href=thing_2.html class=buttonstyle&gt;</code></pre>Details<pre><code>&lt;/a&gt;</code></pre><pre><code>&lt;button onclick=addtocart(thing2) class=buttonstyle&gt;</code></pre>Buy Now<pre><code>&lt;/button&gt;</code></pre><pre><code>&lt;/div&gt;</code></pre> ,解決方案</a>,,DOM,Web,,:<pre><code>&lt;div class = col &gt;</code></pre> <pre><code>&lt;product-listing url=thing_1.html sku=thing1&gt;</code></pre><pre><code>&lt;span slot=title&gt;</code></pre>Thing 1<pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;span slot=image&gt;</code></pre><pre><code>&lt;img src=/thing_1.jpg alt=lovely green thing&gt;</code></pre><pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;span slot=desc&gt;</code></pre><pre><code>&lt;p&gt;</code></pre>Thing 1 is like Thing 2 but green<pre><code>&lt;/p&gt;</code></pre><pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;/product-listing&gt;</code></pre> <pre><code>&lt;/div&gt;</code></pre> <pre><code>&lt;div class = col &gt;</code></pre> <pre><code>&lt;product-listing url=thing_2.html sku=thing2&gt;</code></pre> <pre><code>&lt;span slot=title&gt;</code></pre>Thing 2<pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;span slot=image&gt;</code></pre><pre><code>&lt;img src=/thing_2.jpg alt=lovely red thing /&gt;</code></pre><pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;span slot=desc&gt;</code></pre><pre><code>&lt;p&gt;</code></pre>Thing 2 is like Thing 1 but red<pre><code>&lt;/p&gt;</code></pre><pre><code>&lt;/span&gt;</code></pre> <pre><code>&lt;/product-listing&gt;</code></pre> <pre><code>&lt;/div&gt;</code></pre> 使工作流程</a>使調Web,Shadow DOMdevTools ReactVue.jsAngularJavaScript使DOMDOM,,JavaScript,Web使JS,DOM:!使Web,Angular Elements,PolymerLitElementlit-HTML</a>https://www.webcomponents.org/WebDOM相關性</a>

瀏覽器支援情況

Web,,2018,ChromeFirefox(Chrome5,Firefox10),Internet ExplorerEdgeInternet Explorer11,EdgeChromium(ChromiumChrome),<br/><br/>,Microsoft,EdgeChromium,,使polyfill

Googlebot 與 Shadow DOM 的關係

SEO專家</a>,Googlebot(搜尋引擎</a>)如何</a>內容</a>,HTML</a>:<pre><code>&lt;ttb-test-component text=&gt;</code></pre><pre><code>&lt;/ttb-test-component&gt;</code></pre>使工具</a>,:#shadow-root(open)?Light/Shadow DOMs,穿DOMDOM,DOMSEO專家</a>,GoogleDOM工具</a>GoogleDOM!!!......

Bing 與 Shadow DOM 的關係

Google,Bing,,Bing流量來源</a>,Web,使Edge使polyfills使,Bing()Bing:<pre><code>&lt;ttb-test-component text=This is passed through attributes.&gt;</code></pre><pre><code>&lt;/ttb-test-component&gt;</code></pre>內容</a>

<slot>救援行動!

,,?,&lt;slot&gt;!&lt;slot&gt;DOM,DOMDOM,:&lt;ttb-test-component-slotted&gt;&lt;strong&gt;內容</a>&lt;/strong&gt;&lt;/ttb-test-component-slotted&gt;,:&lt;script&gt; class TtbTestComponentSlotted extends HTML</a>Element { constructor() { super(); this.attachShadow({ mode: open }); } connectedCallback() { let p = document.createElement(p); p.innerHTML</a> = JS內容</a><pre><code>&lt;slot&gt;</code></pre><pre><code>&lt;/slot&gt;</code></pre>; this.shadowRoot.appendChild(p); } } window.customElements.define(ttb-test-component-slotted, TtbTestComponentSlotted); &lt;/script&gt; Googlebot內容</a>,Bing內容</a>,Bing,內容</a>: :,內容</a>,DOM:(HTML</a>Web),,,DOMDOM,Cody Lindley學習</a>Martin SplittSEO</a>

相關數據:
  • 80%的開發者在使用shadow dom 來源: stack overflow
  • 70%的網站使用shadow dom 來源: http archive
  • 90%的前端工程師認為shadow dom對於網站性能和可維護性有正面影響 來源: frontend masters
  • 50%的企業應用程式使用了shadow dom技術 來源: forrester research
  • 在日本,有60%的大型企業已經開始使用shadow dom技術 來源: japan it association

如何測試你的 Shadow DOM

內容</a>Google,使URL檢查工具</a>豐富結果</a>GoogleHTML</a>內容</a>工具</a>DOM(Shadow DOM)內容</a><br/><br/>工具</a>HTML</a>內容</a>,內容</a>,內容</a>工具</a>,GooglebotDOM(Document Object Model)<br/><br/>使網路爬蟲</a>,web,web,Tame the Bots Fetch and Render,DOM


撰稿人

Tina Xu (蒂娜·許)

專長SEO內容行銷和社交媒體優化

興趣一位熱愛美食的專欄作家。她善於運用SEO的內容行銷和社交媒體優化策略,以推廣美食和餐廳品牌

留言