jlengrand/webcomponentsjs
1
0
Fork 0
mirror of https://github.com/jlengrand/webcomponentsjs.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve README documentation on CSS encapsulation

Browse Source 
Should fix #451 and #458 to some extent.
This commit is contained in:
Koen Kivits
2015-12-08 21:16:33 +01:00
parent 396430f7a0
commit c93c9f21fa
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -90,11 +90,25 @@ window.addEventListener('WebComponentsReady', function(e) {
## Known Issues
* [Limited CSS encapsulation](#encapsulation)
* [Custom element's constructor property is unreliable](#constructor)
* [Contenteditable elements do not trigger MutationObserver](#contentedit)
* [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
* [execCommand isn't supported under Shadow DOM](#execcommand)
### Limited CSS encapsulation <a id="encapsulation"></a>
Under native Shadow DOM, CSS selectors cannot cross the shadow boundary. This means document level styles don't apply to shadow roots, and styles defined within a shadow root don't apply outside of that shadow root. [Several selectors](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) are provided to be able to deal with the shadow boundary.
The Shadow DOM polyfill can't prevent document styles from leaking into shadow roots. It can, however, encapsulate styles within shadow roots to some extent. This behavior isn't automatically emulated by the Shadow DOM polyfill, but it can be achieved by manually using the included ShadowCSS shim:
```
WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
```
... where `shadowRoot` is the shadow root of a DOM element, and `scope` is the name of the scope used to prefix the selectors. This removes all `<style>` elements from the shadow root, rewrites it rules using the given scope and reinserts the style as a document level stylesheet. Note that the `:host` and `:host-context` pseudo classes are also rewritten.
For a full explanation on the implementation and both the possibilities and the limitations of ShadowCSS please view the documentation in the [ShadowCSS source](src/ShadowCSS/ShadowCSS.js).
### Custom element's constructor property is unreliable <a id="constructor"></a>
See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.