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

相关文章

来自专栏Nian糕的私人厨房

Bootstrap 介绍

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,该框架能帮助我们快速开发 web 页面以及响应式网站,我们能够使用 Bootstra...

1145
来自专栏葡萄城控件技术团队

Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面

Xamarin.Forms 是一个跨平台的、基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用...

3707
来自专栏向治洪

listview滑动删除

今天还是给大家带来自定义控件的编写,自定义一个ListView的左右滑动删除Item的效果,这个效果之前已经实现过了,有兴趣的可以看下Android 使用Scr...

2007
来自专栏.Net /C#

C# 绘制PDF嵌套表格

嵌套表格,即在一张表格中的特定单元格中再插入一个或者多个表格,使用嵌套表格的优点在于能够让内容的布局更加合理,同时也方便程序套用。下面的示例中,将介绍如何通过C...

130
来自专栏移动端周边技术扩展

iPhoneX Max适配

640 × 960 iPhone4s Default@2x

3374
来自专栏移动端周边技术扩展

iOS打开系统功能对应的URL

1583
来自专栏林德熙的博客

Xamarin Forms 进度条控件

本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-c...

741
来自专栏Porschev[钟慰]的专栏

解决文本框在updatepanel中得到焦点,输入法不能切换到中文的问题

今天看人提问才发现TextBox放在updatepanel中,当点击Button时,在Button的click事件中得到焦点。。。 本来应该用TextBox1....

1826
来自专栏偏前端工程师的驿站

WPF一步一脚印系列(1):万事起头难

  一直从事Asp.Net的开发,而C/S的开发方面简直是一片空白,于是从上星期开始就痛下决心开始学习WPF。我采取的策略是网上看基础资料+做简单的demo练习...

2049
来自专栏菩提树下的杨过

ExtJs学习笔记(18)_ExtJs嵌入FCK示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

1865

扫码关注云+社区