Skip to content

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:

Clone this wiki locally