Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

多重影分身,SHADOW标签

  在同一个元素上是允许创建多个Shadow Root的,但是默认情况下只会显示最后一次创建的Shadow Root。那么之前创建的Shadow Root呢?它们当然不会凭空消失,每一个Shadow Root中都可以使用SHADOW标签来引用上一个Shadow Root产生的内容。
<div id="test">数据</div>
<script>
var root1=test.webkitCreateShadowRoot();
root1.innerHTML='第一个 Shadow Root';
var root2=test.webkitCreateShadowRoot();
root2.innerHTML='第二个 Shadow Root';
var root3=test.webkitCreateShadowRoot();
root3.innerHTML='第三个 Shadow Root';
</script>

  只有最后一个被显示出来,其它的都不见了,就像“千手观音”一样

  在Shadow DOM中使用SHADOW标签即可引用到上一层Shadow Root的内容 <div id="test">数据</div>
<script>
var root1=test.webkitCreateShadowRoot();
root1.innerHTML='第一个 Shadow Root';
var root2=test.webkitCreateShadowRoot();
root2.innerHTML='<shadow></shadow><br/>第二个 Shadow Root';
var root3=test.webkitCreateShadowRoot();
root3.innerHTML='<shadow></shadow><br/>第三个 Shadow Root';
</script>

  这样就可以把多个Shadow Root一起展示出来了。但我觉得这个设定意义并不大,目前暂时没遇到需要这个功能的应用场景,而且浪费了一个珍贵的HTML标签名,实在是很鸡肋。   
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^