Web 技术研究所

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

ShadowDOM与CSS选择器

  在使用ShadowDOM封装一些组件的使用通常会遇到这样的问题,当几个ShadowDOM封装的组件嵌套使用时,由于文档中的CSS通常不会穿透ShadowDOM来设置被嵌套在另一个ShadowDOM中使用的元素样式,导致样式不能统一设置。但实际上,CSS选择器支持ShadowDOM穿透。
  也许这样描述无法表达清楚,那么举个例子。假如我用自定义标签x-integer做了个数值输入控件,然后又用自定义标签x-range做了一个数值范围输入控件(需要使用两个数值输入控件)。那么,即使我在全局样式中对x-integer标签设置样式,在x-range的ShadomDOM也不会生效,因为通常情况下CSS样式不会穿透ShadomDOM。只有直接在最外层文档上使用的x-integer标签样式才会生效。
  解决这个问题其实非常简单,就是在CSS中时候可穿透ShadomDOM的选择器,比如
<body>
<style>
script {display:block;}
span {color:red;} /* 普通的选择器无法穿透ShadowDOM */
script::shadow div {color:red;} /* 使用shadow伪类穿透ShadowDOM */
</style>
<script>
var root=document.currentScript.createShadowRoot();
var span=document.createElement("span");
var div=document.createElement("div");
span.textContent="我是ShadowDOM中的span元素";
div.textContent="我是ShadowDOM中的div元素"
root.appendChild(span);
root.appendChild(div);
</script>
</body>
  但::shadow伪元素仅能穿透1层ShadowDOM,有点类似子类选择器的感觉。 <body>
<style>
script {display:block;}
script::shadow span {color:red;} /* 只对第一层ShadowDOM生效 */
</style>
<script>
var root=document.currentScript.createShadowRoot();
var span=document.createElement("span");
var div=document.createElement("div");
span.textContent="我是ShadowDOM中的span1元素";
root.appendChild(span);
root.appendChild(div);
var root2=div.createShadowRoot();
var span2=document.createElement("span");
span2.textContent="我是ShadowDOM中的span2元素";
root2.appendChild(span2);
</script>
</body>
  除了::shadow伪元素,我们还可以使用/deep/来对所有层次的ShadowDOM生效。
<body>
<style>
script {display:block;}
script /deep/ span {color:red;} /* 对所有层次的ShadowDOM生效 */
</style>
<script>
var root=document.currentScript.createShadowRoot();
var span=document.createElement("span");
var div=document.createElement("div");
span.textContent="我是ShadowDOM中的span1元素";
root.appendChild(span);
root.appendChild(div);
var root2=div.createShadowRoot();
var span2=document.createElement("span");
span2.textContent="我是ShadowDOM中的span2元素";
root2.appendChild(span2);
</script>
</body>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^