你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

The Cat and the Hat CSS Selectors

表现 练习 11772浏览 0评论

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.

原文链接

转载请注明:练小习的前端技术笔记 » The Cat and the Hat CSS Selectors

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址