The Cat and the Hat CSS Selectors

One of the trickier aspects of encapsulating Shadow DOM CSS is figuring out how much access the parent document should have. Initially it was thought that the Shadow DOM’s author would decide which elements could be exposed for styling by using part attributes, but it seems like that might be too limiting. The thinking now is that the shadow boundary should prevent accidental styling of the shadow DOM, but allow intentional styles. That’s where the new “cat” and “hat” CSS selectors come in.

Support

In order to try the examples I suggest you use Chrome Canary v33 or greater.

Also make sure you’ve enabled Experimental Web Platform features in Chrome’s chrome://flags.

The Hat

The hat selector, a single caret ( ^ ), allows the parent document to pierce the upper shadow boundary and style elements that are one shadow root deep. If you have an element that only has one shadow root you can style pretty much anything inside of it using the hat.

The Cat

The cat, a double caret ( ^^ ) is much more powerful. It allows you to pierce every layer of the shadow DOM, so if you have shadow DOM within shadow DOM (a common occurrence when you nest custom elements) you can style all of them at once.

Styling Native Elements

@Volker_E asked if the cat and hat selectors could be used to style the shadow DOM of native elements like video. As it turns out that does work, which is pretty cool.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技...

41610
来自专栏逍遥剑客的游戏开发

Untiy Native Render Plugin在VR中的绘制

1866
来自专栏互联网杂技

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

3586
来自专栏Modeng的专栏

Canvas学习系列二:Canvas的坐标系统

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_321352...

401
来自专栏玩转前端

flutter开发技巧汇总[持续更新]

1、你应该会碰到initState会被多次执行的问题,通常发生在tabView的切换时,此时你可能要了解一下这个接口了。

2406
来自专栏Golang语言社区

【Golang语言社区--H5编程】smoke.js

大家好,我是社区主编彬哥,今天给大家带来的H5游戏编程中,烟雾特效的js库; 源码如下 var smokemachine = function (c...

32610
来自专栏WindCoder

A Cold Dive into React Native (Tutorial for Beginners)

原文:A Cold Dive into React Native (Tutorial for Beginners)

531
来自专栏pangguoming

HTML5 game engines

The following are few examples of game engines implemented with HTML5 and JavaSc...

4637
来自专栏天天

Canvas高级

701
来自专栏我和未来有约会

[Silverlight 4 RC]RichTextBox概览

我们知道在silverlight 4 beta的时候增加了RichTextArea的控件。做过RIA开发的朋友富媒体在动态文本的表现渲染方面是很弱的。我们看到的...

1688

扫码关注云+社区