Web 技术研究所

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

ShadowDOM与伪元素

  使用::shadow伪元素和/deep/选择器强行修改ShadowDOM所封装内容的样式是非常暴力的做法,它会破坏ShadowDOM封装的优势。有没有一种更绅士的做法呢?ShadowDOM提供了自定义伪元素,封装时以这个伪元素作为接口就可以给外部提供一个选择的接口。
  理论上,我们可以写这样的代码 <style>
div::x-span {color:red;}
</style>
<div id="panel"></div>
<script>
var root=panel.createShadowRoot();
var span=document.createElement("span");
span.textContent="我应该是红色的";
span.pseudo="x-span";
root.appendChild(span);
</script>
  遗憾的时候,目前浏览器对自定义伪元素的支持并不好。虽然这东西确实有,但Chrome仅通过这个特性做了一套私有的伪元素,并没有把它做成可自定义的。这套伪元素用于浏览器的原生控件中,比如对之前纠结的INPUT[type=file]我们可以这么写 <style>
[type=file]::-webkit-file-upload-button {border:1px solid red;}
</style>
<input type="file" />

  这样是可以生效的,因为在INPUT[type=file]控件内部,对按钮添加了浏览器自定义的伪元素接口

  在上传按钮的属性中有个pseudo="-webkit-file-upload-button",所以外部的CSS可以通过这里定义的伪元素直接访问这个ShadowDOM里面的元素。当然,目前这种用法被浏览器垄断了,开发者暂时无法在自己的ShadowDOM封装中这么用,但我猜不久之后它就可以支持上,成为真正意义上的“Custom Pseudo-Elements”。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^