search

webcomponents / webcomponentsjs

A suite of polyfills supporting the HTML Web Components specs
http://webcomponents.org/polyfills/
Other
3.87k stars 490 forks source link

No indication that style encapsulation is not supported #451

Closed Heydon closed 8 years ago

Heydon commented 8 years ago

It should be WRIT LARGE that webcomponents.js does not scope styles as one would imagine it might when terminology like "provides encapsulation by hiding DOM subtrees under shadow roots" is used.

I wasted a lot of my valuable time debugging this script to find out why styles were leaking into the document and would have appreciated some transparency, as I'm sure would others.

(I understand Polymer shims style encapsulation, but I'm not particularly interested in using the Polymer abstraction layer. It would be great if I could just use standard web components with this important feature supported. If it's possible via Polymer, why not here?)

Thanks to @lozandier, @addyosmani and @ebidel for establishing the problem with me yesterday.

koenkivits commented 8 years ago

Note that support for style encapsulation is available, but it isn't done automatically and is not documented. Here's an example of how I worked around this in the past: https://github.com/koenkivits/x-nes/blob/b8fef72/src/x-nes.js#L274

A related (closed) issue is #140. If the 'Common pitfalls' section in the README is the way to go for this type of documentation, I wouldn't mind having a go at writing some of this down.

addyosmani commented 8 years ago

I would personally hugely appreciate assistance with updating the README to cover some more of these pitfalls. We definitely want to avoid folks having to discover limitations of the current polyfills on their own where docs would help. Want to take a stab at this @koenkivits?

koenkivits commented 8 years ago

Sure! I will probably have some time in the next few days to try and set something up.