解释 shadow dom（上）

ShadowDOM最大的用处应该是隔离外部环境用于封装组件。我们可以轻松地封装一个组件然后可以跨项目共享这个组件。样式也被封装，我们甚至可以不用写CSS 样式完全在我们的组件中，这样就防止开发人员随意修改样式

social-isolation-apex-nc.jpg

我们创建通知组件给大家说明一下 shadow dom，下面代码我就不多解释了

<div id="notificaton">
    <p>Lorem ipsum dolor sit amet.</p>
   <button>确定</button>
</div>

001.JPG

然后当我们通过id获取元素，然后调用元素的 createShadowRoot 方法来获取 shadow dom，这样一下我们的notification 就不见了。

var shadow = document.querySelector('#notificaton').createShadowRoot();

然后我们 html 赋值给shadow dom 的 innerHTML 的属性，我们界面就又回来了

 shadow.innerHTML = `
        <p>Lorem ipsum dolor sit amet.</p>
        <button>确定</button>
        `

在 html 字符串中我们还可以添加样式 <style>p { color: blue; }</style>

<script>
        var shadow = document.querySelector('#notificaton').createShadowRoot();
        shadow.innerHTML = `
        <style>p { color: blue; }</style>
        <p>Lorem ipsum dolor sit amet.</p>
        <button>确定</button>
        `
    </script>

sd-007.JPG sd-008.JPG

 var notificaton = document.getElementById('notificaton');
        var shadowroot = notificaton.createShadowRoot();
        shadowroot.innerHTML = `
        <content select="p">Lorem ipsum dolor sit amet.</content>
        <button>确定</button>
        `

sd-003.JPG

这里介绍一个:host 伪选择器，通过 :host 可以选择 shadow 下面的

var notificaton = document.getElementById('notificaton');
            var shadowroot = notificaton.createShadowRoot();
            shadowroot.innerHTML = `
        <style>:host {
            font-weight: bold;
            color:blue;
        }</style>
        <content select="span">Lorem ipsum dolor sit amet.</content>
        <button>确定</button>
        `

这里有两个语法已经过时，这里支出一下

• 获取 shadow dom 的 attachShadow 已经被 attachShadow 替换
• content 标签也被可以提供更流

<p>Lorem ipsum dolor sit amet.</p>
    <div id="notificaton">
            <h2>消息标题</h2>
            <p>消息内容</p>  
            <button>确定</button>
    </div>
    <script>
        var notificaton = document.getElementById('notificaton');
            var shadowroot = notificaton.attachShadow({mode:'open'});
            // shadowroot.appendChild(document.getElementById('notification-content').content.cloneNode(true));
            shadowroot.innerHTML = `
        <style>
            :host { color: blue; }
        </style>
            <slot>
        
        `

sd-009.JPG

 <p>Lorem ipsum dolor sit amet.</p>
    <div id="notificaton">
        <h2 slot="header">消息标题</h2>
        <p slot="body">消息内容</p>  
        <button>确定</button>
    </div>
    <script>
        var notificaton = document.getElementById('notificaton');
            var shadowroot = notificaton.attachShadow({mode:'open'});
            // shadowroot.appendChild(document.getElementById('notification-content').content.cloneNode(true));
            shadowroot.innerHTML = `
        <style>
            :host { color: blue; }
        </style>
            <slot name="body"></slot>
            <slot name="header"></slot>
            <slot>
        `