可以看到，shadow root里面的内容替换掉了shadow root父元素的内容。因此，我们可以将一些数据内容在shadow root下显示出来。下面，结合<content>和<template>标签，从shadow root父元素中获取内容数据，然后显示出来。

html结构和js如下：

html结构：

<div class="shadowhtml3"> <p class="shadowp">猴年大吉，万事如意，猴赛雷！</p> </div> <template class="tpl"> <span>祝大家<content select=".shadowp"></content></span> </template>

js:

<script type="text/javascript"> document.querySelector('.shadowhtml3').createShadowRoot().appendChild(document.querySelector('.tpl').content); </script>

结果如下：

猴年大吉，万事如意，猴赛雷！

祝大家

实现过程如下：

以上只是一些shadow dom的简单实现，深挖的话必定能实现更加复杂丰富的效果。

转载请标明出处
作者：myvin
原文出处：

上一篇：《鼠标滚动插件smoovejs和wowjs》 置顶文章：《纯CSS打造银色MacBook Air（完整版）》