create intermediate shadowRoot to scope styles

[valdrinkoshi]

Fixes #2
If we find a <style> in the content template, we scope it by creating an intermediate element and host content in its shadowRoot.
Added new property contentHost to allow querySelectors & adding event listeners on the right host.

• update README.md
• update demo
• add tests

Tests failing because of webcomponents/shadydom#130

[valdrinkoshi]

webcomponents/shadydom#130 got fixed in webcomponents v1.0.0-rc.10, so tests are 💚 again 🎉

[valdrinkoshi]

After discussing about this offline with @frankiefu, I opted for always creating the intermediate shadowRoot and scope styles. There is no strong case for having the content stamped on the light dom, so better not to implement that feature until there is one.

[frankiefu]

iron-overlay/iron-overlay-container.html

Line 160 in facfb1b

_getHostRoot() {

: Is this the same as getRootNode?

iron-overlay/iron-overlay-renderer-shared-styles.html

Line 40 in facfb1b

display: -ms-flexbox;

: I don't think we need prefix for flexbox anymore. Both IE 11 and Safari 9 support unprefix flexbox.

iron-overlay/iron-overlay-renderer.html

Line 176 in facfb1b

this.$.backdrop && this.$.backdrop.classList.toggle('opened', this.opened);

: classList.toggle's second argument is not supported in IE 11.

[valdrinkoshi]

@frankiefu thanks for the review, fixed!

[cdata]

Heya, going through old PRs thanks to Project Health. What is the status of this PR? Do I still need to be assigned?

[valdrinkoshi]

@cdata yeah I'd like to know WDYT of this approach for scoping styles.

The user will declare the overlay like this:

<iron-overlay id="myOverlay">
  <template>
    <style> div { background: orange } </style>
    <div>hello world</div>
  </template>
</iron-overlay>

Which will result in a stamped renderer with content scoped into a new shadowRoot:

<iron-overlay-renderer data-overlay="myOverlay">
  <iron-overlay-content-host>
    #shadowRoot
      <style> div { background: orange } </style>
      <div>hello world</div>
    #/shadowRoot
  </iron-overlay-content-host>
</iron-overlay-renderer>

Pros: styles are scoped
Cons: user now has to access to its content via myOverlay.contentHost instead of myOverlay.renderer

[cdata]

Speaking abstractly, I like it. I don't consider the con you mentioned to be a big deal.