-
Notifications
You must be signed in to change notification settings - Fork 384
Shadow piercing Combinators in the Wild
Dimitri Glazkov edited this page Mar 10, 2015
·
11 revisions
Blink had been shipping the /deep/ combinator since M35. Here are some observations of the usage patterns in the wild.
####Positives
The /deep/ combinator provided a somewhat incremental workaround for existing CSS theming frameworks and empowered widget consumers to style pre-developed widgets to their liking. For example:
- retrofitting Bootstrap to work with Shadow DOM is fairly mechanical 1, 2, 3
- it's relatively easy to spelunk into a widget to tweak its style 4, 5, 6
####Negatives
Definitely seen the predicted abuse of the combinator. A couple of examples:
- In two of the "positives" examples provided, the Bootstrap retrofits are effectively surrendering the style scoping boundary.
- Polymer's layout.html 7 is a set of attribute-based layout helpers, which uses
/deep/to apply in every tree 8. Given that this import loads by default in Polymer 0.5, the exception becomes the norm. Note: in Polymer 0.8, layout.html is no longer part of the core. - Third-party theming uses
/deep/to layer styles over existing UI library 9.
Interestingly, the first-party theming is actually moving away from using /deep/ and into more producer/consumer model 10.
#####Not-unreasonable use cases
Overall, these seem like the scenarios where the need for /deep/ is reasonable:
- Incremental adoption. I need to retrofit an existing CSS theming framework to reach into the scopes, created by shadow trees.
-
UA stylesheet equivalent. I would like to define a few "global" rules (for example,
table { border-collapse: collapse; }). - Final tweak. I have a widget I like, but I need to tweak the style just so to meet my unique requirements.
####Clearly-broken use cases
These scenarios seemed less reasonable: