Web 技术研究所

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

Shadow DOM数据关联,CONTENT标签

  元素在创建了Shadow Root之后,它自身的内容就不再正常渲染了,取而代之的是Shadow DOM的内容。那么,原来的内容到哪儿去了呢?内容当然不会就这样消失掉,这些内容可以作为UI组件的数据部分,与Shadow DOM内的CONTENT标签关联起来。
<div id="test">我是数据</div>
<script>
var root=test.webkitCreateShadowRoot();
root.innerHTML='<h1 style="color:red;"><content></content></h1>';
</script>

  上面这个例子在Shadow DOM中使用了一个CONTENT元素,在渲染时它会被直接替换成元素自身的内容。而且这个关联是实时的,这么一来我们只要修改DOM文档中的内容就改变Shadow DOM的渲染结果。比如下面这个例子
<div id="test"></div>
<script>
var root=test.webkitCreateShadowRoot();
root.innerHTML='<h1 style="color:red;"><content></content></h1>';
var i=0;
setInterval(function(){
  test.textContent=i++;
},16);
</script>
  CONTENT标签还可以通过一个select属性来使用一个选择器,从基元素中选择数据。反正这部分数据是不被正常渲染的,如果觉得用CLASS或用ID选择太麻烦可以直接使用自定义标签。下面是例子
<div id="test">
  <x-from>DOM文档</x-from>
  <x-name>test元素</x-name>
</div>

<template id="temp">
  我是来自 <strong><content select="x-from"></content></strong>
  中的 <strong><content select="x-name"></content></strong>
  的数据。
</template>

<script>
var root=test.webkitCreateShadowRoot();
root.appendChild(document.importNode(temp.content));
</script>

网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^