Shadow DOM 与 HTML Templates

最新推荐文章于 2021-07-05 14:38:26 发布

2008winstar

最新推荐文章于 2021-07-05 14:38:26 发布

阅读量1.1k

点赞数

分类专栏： Web Components 文章标签： Web Components

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

版权

Web Components 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在之前的Web Components系列文章中，简单介绍了Web Components概要，HTML Templates，Shadow DOM，Shadow DOM（二）。

本文将在此基础上，介绍Shadow DOM与HTML Templates如何一起协作。

在Shadow DOM（二）中，介绍了如何创建Shadow DOM：通过调用createShadowRoot()方法创建root节点，然后在JavaScript中创建普通的HTML节点，并将这些节点附到Shadow Root上。但这种方式比较繁琐，因为普通的HTML标签也要通过JavaScript方法创建。普通的HTML节点，应该通过声明式的方式创建更为方便、合理。

而HTML Templates便为我们提供了实现这一目的的能力。HTML Templates的介绍，可见这里。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div class="host">Hello World!</div>
    <template id="tmpl">
        <h1>Shadow DOM 介绍</h1>
        <p>Shadow DOM 详细信息</p>
    </template>
    <script>
        var host = document.querySelector('.host');        
        var root = host.createShadowRoot();<pre name="code" class="html">        var tmpl = document.querySelector('#tmpl');

root.appendChild(document.importNode(tmpl.content, true)); </script></body></html>

在这个示例代码中，首先通过template标签创建一个HTML模板。在JavaScript前面两行代码与 Shadow DOM（二）中的示例是一样的，后面两行代码，首先是获取到template节点，然后将template的内容（content）拷贝后附加到root上。

在浏览器中运行，得到效果如下图所示：

通过这个示例，可以看到如何在创建Shadow DOM的过程中借助Template来实现，这种方式更为简便，而且在template中还可以包含样式等信息，如果在JavaScript中直接创建的话，不仅繁琐而且可维护性很差。

2008winstar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Shadow DOM 与 HTML Templates

在之前的Web Components系列文章中，简单介绍了Web Components概要，HTML Templates，Shadow DOM，Shadow DOM（二）。本文将在此基础上，介绍Shadow DOM与HTML Templates如何一起协作。在Shadow DOM（二）中，介绍了如何创建Shadow DOM：通过调用createShadowRoot()方法创建root节
复制链接

扫一扫