Polymer 0.8 Shady DOM

Question

Does the Shady DOM introduced with Polymer 0.8 prevent styles from being leaked into the local DOM or is that something only the Shadow DOM can do?

https://www.polymer-project.org/0.8/docs/devguide/experimental.html#xscope-styling

In the following example, would the Shady DOM prevent the title from becoming red?

my-element.html

<template>
    <span class="title">{{title}}</span>
</template>

styles.css

.title {
    color: red;
}

Bede Bede · Accepted Answer · 2015-04-27T07:01:27

I've been testing Polymer 0.8 and so far it seems it doesn't. The shadow boundary rules are not upheld, as it scopes styles defined in the <dom-module> to the Polymer element, but does not stop leaking from the external stylesheet. There docs here imply that, though I wouldn't say they've explicitly stated it: https://www.polymer-project.org/0.8/docs/devguide/local-dom.html#scoped-styling

Edit: I'm guessing this'll be fixed in 0.9 or 1.0, see this post. Though I find there last point on this part to suggest it should be available now, unless I'm missing something.

Polymer 0.8 Shady DOM

1 Answers