Shadow DOM（二）

最新推荐文章于 2023-11-29 18:01:08 发布

2008winstar

最新推荐文章于 2023-11-29 18:01:08 发布

阅读量2.1k

点赞数

分类专栏： Web Components

本文链接：https://blog.csdn.net/winstar1688/article/details/43494533

版权

Web Components 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在前一篇博文中，简单地介绍了Shadow DOM是什么。

本文，将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。

Shadow DOM 能做什么

简单地说，有了Shadow DOM（若浏览器支持该规范），开发者可以封装HTML标签，CSS样式以及JavaScript，提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web Components技术，开发者将具有开发出类似<input type="time">或者类似<audio>、<video>这样的标签的能力。

如何创建Shadow DOM

要创建Shadow DOM，首先需要选择Shadow DOM挂载的节点，然后调用createShadowRoot()方法，创建一个Shadow DOM的根节点，在这个根节点上可以添加任意的由普通HTML标签形成的DOM节点，从而形式由一颗DOM Tree。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div class="host">Hello World!</div>
    <script>
        var host = document.querySelector('.host');
        var root = host.createShadowRoot();
        
        var node = document.createElement('h1');
        node.textContent = 'Shadow DOM 介绍';
        
        var para = document.createElement('p');
        para.textContent = 'Shadow DOM 详细信息';
        
        root.appendChild(node);
        root.appendChild(para);
    </script>
</body>
</html>

上述代码中，首先选择了class为host的节点，然后在这个节点上调用createShadowRoot()方法创建Shadow DOM的根节点root。然后再分别创建了两个普通HTML节点并设置其内容，最后将它们添加到root上。

运行结果，如下图所示：

从运行结果可以看到，原来div中的“Hello World!"内容并没有在浏览器中渲染出来，而是渲染Shadow DOM中的内容。这也是Shadow DOM的一个特性，在后续的介绍中将会进行详细解释。

Shadow DOM的相关概念

在上一节中，为了创建Shadow DOM，先需要选择一个DOM 节点，然后调用createShadowRoot()方法创建Shadow DOM的根节点。这个根节点，称为Shadow Root。与Shadow Root关联的那个节点称为Shadow Host。与Shadow DOM对应，常规的DOM，称为Light DOM。在Light DOM与Shadow DOM之间存在一个边界，称为Shadow Boundary。Shadow Boundary的重要作用就是，避免了Light DOM中的样式渗透到Shadow DOM中，从而避免了样式冲突等问题。

2008winstar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Shadow DOM（二）

在前一篇博文中，简单地介绍了Shadow DOM是什么。本文，将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。Shadow DOM 能做什么简单地说，有了Shadow DOM（若浏览器支持该规范），开发者可以封装HTML标签，CSS样式以及JavaScript，提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web
复制链接

扫一扫