Web 技术研究所

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

UI组件封装神器,Shadow DOM

  在HTML中,UI组件的封装一直都是一件很棘手的事情,因为CSS是全局的,虽然可以通过后代选择器来简单处理,但在团队开发中依然有全局样式名称冲突的风险。Shadow DOM提供了一个与全局CSS样式隔离的环境,可以将UI组件封装成一个类似替换型元素的组件。
  那么,如何使用Shadow DOM呢?其实很简单,只要在DOM元素上调用createShadowRoot方法即可让该元素成为一个Shadow DOM的根。但需要注意浏览器兼容,有些浏览器是需要加前缀的。下面是例子
<div id="test">元素本来的内容不会被渲染</div>
<script>
var root=test.webkitCreateShadowRoot();
root.innerHTML="<strong>我就是传说中的 Shadow DOM</strong>";
</script>

  在Shadow DOM中的东西不会在DOM树中出现,所以审查元素时只会看到它的基元素。而且,一旦元素创建了Shadow Root,它自身的内容就不再被正常渲染了,我们只会看到Shadow DOM中的内容。上面的例子中使用了innerHTML,这是为了方便演示才使用的,实际应用时使用TEMPLATE标签会更好。
  那么,独立的CSS又从何说起呢?在Shadow DOM中可以有STYLE标签,Shadow DOM中的STYLE标签不会影响到外部文档,外部文档的样式表也不会影响到Shadow DOM。比如下面这个例子
<style>div {color:blue;}</style>
<div class="">我是 Shadow DOM 外的 DIV</div>

<div id="test"></div>

<template id="temp">
  <style>div {color:red;}</style>
  <div>我是 Shadow DOM 内的 DIV</div>
</template>
<script>
var root=test.webkitCreateShadowRoot();
root.appendChild(document.importNode(temp.content));
</script>

  这个例子中对全局的DIV元素设置了文字颜色,在Shadow DOM中也对内部的全局DIV元素设置了文字颜色。但是这两个样式并没有冲突,都在各自的范围内生效着。所以对于UI组件的封装,这么做就可以完全避免样式的冲突。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^