Shadow DOM

什么是Shadow DOM

顾名思义：影子DOM

Shadow DOM看上去与普通DOM是一样的，但是有两点区别：

1. 创建/使用的方式
2. 与页面其他部分有关的行为方式

通常我们会创建DOM节点并将其附加至其他元素作为子项；
借助shadow DOM，我们可以创建作用域DOM树，该DOM树附加至该元素上，但是与其自身的真正的子项分离开； 这一作用域子树称为影子树，被附着的元素称为影子宿主；
在影子中添加的任何项均将称为宿主元素的本地项，包括<style>这也是shadow DOM实现CSS样式作用域的方式

创建Shadow DOM

调用element.attachShadow()

// 创建dom节点<header>（影子宿主）
const header = document.createElement('header')
// 创建shadow DOM shadowRoot（影子根）
const shadowRoot = header.attachShadow({ mode: 'open' })
// 填充shadow DOM
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'

💡、<input>元素自身内部的shadow DOM已经被浏览器托管了，不可以自定义</p> </blockquote> <p><a name="S2O0h"></a></p> <h4 id="3ufjjv"><a name="3ufjjv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>为自定义元素创建shadow DOM</h4><p>创建自定义元素时，使用shadow DOM可以用来分隔元素的HTML、CSS和JS，从而生成一个网络组件。</p> <pre><code class="lang-javascript">customElements.define('lx-tabs', class extends HTMLElement { constructor () { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style>#tabs{...}#panels{...}</style> <div id="tabs">...</div> <div id="panels">...</div> ` } }) </code></pre> <p><a name="sW2Vn"></a></p> <h4 id="76yeht"><a name="76yeht" class="reference-link"></a><span class="header-link octicon octicon-link"></span>组合和slot</h4>