shadow dom是一種將dom結構隱藏并獨立封裝的技術，通過attachshadow()方法創建，返回shadowroot對象作為根節點。使用open模式可外部訪問，closed模式則不可。向shadow dom添加內容可通過innerhtml插入html與css，樣式僅內部生效。訪問元素時，open模式用shadowroot結合queryselector操作，closed模式需預先保存引用。事件處理中，composed屬性設為true可避免事件重定向。slot插槽允許外部內容插入指定位置，提升組件靈活性。css shadow parts支持從外部樣式化內部元素。shadow dom是web components的重要組成部分，與custom elements和html templates協同工作。性能上需避免過度使用，調試可用開發者工具或console.log輔助。
Shadow DOM，簡單來說，就是把DOM結構藏起來，形成一個獨立的“影子”。JS操作它，其實就是進入這個“影子”世界，然后進行各種DOM操作。
掌握Shadow DOM操作，能讓你更好地封裝組件，避免全局樣式污染，提高代碼的健壯性。
Shadow DOM操作的6個核心知識點
如何創建和附加Shadow DOM？
創建Shadow DOM的核心是attachShadow()方法。這個方法會返回一個ShadowRoot對象，你可以把它看作是Shadow DOM的根節點。
const element = document.querySelector('#my-element'); const shadowRoot = element.attachShadow({mode: 'open'}); // 或者 {mode: 'closed'}
mode參數有兩種：open和closed。
- open：可以通過element.shadowRoot訪問到Shadow DOM。
- closed：無法從外部訪問Shadow DOM，增強了封裝性，但調試起來會麻煩一些。
個人建議，除非有特別強的安全需求，否則用open模式，方便調試。畢竟，調試才是程序員的日常。
如何向Shadow DOM中添加內容？
有了ShadowRoot，就可以像操作普通DOM一樣，往里面添加各種元素了。
shadowRoot.innerHTML = ` <style> p { color: blue; } </style> <p>this is a paragraph inside the Shadow DOM.</p> `;
這里不僅可以添加HTML，還可以添加CSS樣式。這正是Shadow DOM的強大之處，樣式只在Shadow DOM內部生效，不會影響到外部。
如何訪問Shadow DOM內部的元素？
如果Shadow DOM是open模式，可以通過element.shadowRoot訪問到ShadowRoot對象，然后用querySelector或querySelectorAll等方法查找元素。
const element = document.querySelector('#my-element'); const shadowRoot = element.shadowRoot; const paragraph = shadowRoot.querySelector('p'); console.log(paragraph.textContent); // 輸出: This is a paragraph inside the Shadow DOM.
如果是closed模式，就無法直接訪問了。只能在創建Shadow DOM的時候，保存對內部元素的引用。
如何處理Shadow DOM的事件？
Shadow DOM的事件處理有些特殊。有些事件會被重定向（retarget），比如鼠標事件。這意味著，如果在Shadow DOM內部點擊一個元素，外部監聽器接收到的事件目標是宿主元素（host element），而不是Shadow DOM內部的元素。
<my-element id="my-element"> #shadow-root <button id="my-button">Click me</button> </my-element> <script> const element = document.querySelector('#my-element'); element.addEventListener('click', (event) => { console.log(event.target); // 輸出: <my-element id="my-element"></my-element> }); const shadowRoot = element.attachShadow({mode: 'open'}); shadowRoot.innerHTML = `<button id="my-button">Click me</button>`; </script>
如果想在外部知道點擊的是Shadow DOM內部的哪個元素，可以使用composed屬性。將composed設置為true，事件就不會被重定向。
如何使用slot插槽？
Slot是Shadow DOM的一個重要特性，它允許外部內容插入到Shadow DOM的指定位置。
<my-element> <span slot="my-slot">This is external content.</span> </my-element> <template id="my-element-template"> <style> div { border: 1px solid red; } </style> <div> <slot name="my-slot">This is default content.</slot> </div> </template> <script> class MyElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); const template = document.getElementById('my-element-template'); shadowRoot.appendChild(template.content.cloneNode(true)); } } customElements.define('my-element', MyElement); </script>
在這個例子中，的內容會替換掉Shadow DOM中的
Slot讓組件更加靈活，可以根據外部的需求定制顯示內容。
如何使用CSS Shadow Parts？
CSS Shadow Parts允許你從外部樣式化Shadow DOM內部的特定元素。
<my-element> #shadow-root <button part="my-button">Click me</button> </my-element> <style> my-element::part(my-button) { background-color: yellow; color: black; } </style> <script> class MyElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = `<button part="my-button">Click me</button>`; } } customElements.define('my-element', MyElement); </script>
在這個例子中，my-element::part(my-button)選擇器會選中Shadow DOM內部的
CSS Shadow Parts提供了一種更精細的樣式控制方式，讓組件的樣式更加可定制。
Shadow DOM與Web Components的關系
Shadow DOM是Web Components的三大基石之一（另外兩個是Custom Elements和HTML Templates）。它們一起協作，可以構建可重用的、封裝良好的Web組件。
Custom Elements定義組件的行為，HTML Templates定義組件的結構，而Shadow DOM則負責封裝組件的內部實現。
Shadow DOM的性能考量
雖然Shadow DOM提供了強大的封裝能力，但過度使用也可能影響性能。創建過多的Shadow DOM可能會增加DOM樹的復雜性，導致渲染變慢。
因此，在使用Shadow DOM時，要權衡封裝性和性能，避免過度使用。
Shadow DOM的瀏覽器兼容性
Shadow DOM的兼容性還算不錯，主流瀏覽器都支持。但是，一些老版本的瀏覽器可能不支持。
如果需要兼容老版本瀏覽器，可以使用polyfill。
Shadow DOM的調試技巧
調試Shadow DOM可能會有些麻煩，特別是closed模式。
- 使用瀏覽器的開發者工具，可以查看Shadow DOM的結構。
- 使用open模式，方便在控制臺訪問Shadow DOM。
- 合理使用console.log，輸出關鍵變量的值。
總之，掌握Shadow DOM操作，可以讓你寫出更健壯、更易維護的Web組件。雖然有些細節需要注意，但只要多加練習，就能熟練掌握。
