专栏首页练小习的专栏The Cat and the Hat CSS Selectors

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 条评论
登录 后参与评论

相关文章

  • 绝对定位bottom值为0的位置问题

    有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

    练小习
  • 比例字体&等宽字体

    我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

    练小习
  • 在 Apache 上部署 Let’s Encrypt 证书与自动续期脚本

    https实战,在 Apache 上部署 Let’s Encrypt 证书与自动续期脚本 作为一只菜鸟,对别人都已经掌握而自己却没有实践过的东西总是心痒难耐,...

    练小习
  • 双11请来一堆科技巨头步道“智能制造”,天猫已在为十年后的电商布局

    双11的硝烟已经弥漫在每个角落——不只是互联网,还有线下实体;不只是内地市场,还有香港台湾等境外市场;不只是促销大战,而是在产品、体验、服务和物流等维度共同发力...

    罗超频道
  • 协调多agent产业共生(CS MA)

    我们提出了一个正式的多agent框架,用于将称为产业共生网络(ISN)的一类协作产业实践作为协作博弈进行协调。 ISN的博弈论公式使我们可以对所谓的ISN实现问...

    小童
  • CodeForces 639 A

    Bear and Displayed Friends time limit per test2 seconds memory limit per tes...

    ShenduCC
  • 管理Airbnb搜索中的多样性(CS CAS)

    搜索系统中长期存在的问题之一是结果多样性的作用。 从产品的角度来看,显示各种结果可为用户提供更多选择,并应带来更好的体验。 但是,这种直觉与常见的机器学习排名方...

    时代在召唤
  • 3道线段树题

    A city's skyline is the outer contour of the silhouette formed by all the buildi...

    王脸小
  • 如何从 Notion 批量导出 Markdown?

    简单看了一下,这三年多以来,我用 Notion 写了不少笔记,也采集了很多网页内容。

    王树义
  • 通过将语义和统计技术结合来动态丰富网络主体(cs.CL)

    翻译:伴随着语义网技术的发展,开始更多使用本体来存储和提取覆盖多个领域的信息。但是,很少有本体能够处理得当不断更新的语义信息日益增长的需求,亦或是针对专业领域用...

    Donuts_choco

扫码关注云+社区

领取腾讯云代金券