Skip to content
ShadowDOM v1 shim
HTML JavaScript
Branch: base
Clone or download
Pull request Compare This branch is 34 commits ahead, 446 commits behind webcomponents:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
externs Prevent renaming of properties added to Window and Node so that other… May 23, 2017
src Merge branch 'master' into base Jun 29, 2017
tests Merge branch 'master' into base Jun 29, 2017
.eslintrc.json One eslint config Sep 8, 2016
.gitattributes Clean up advanced compliation Mar 2, 2017
.gitignore ShadyDOM dom and css shim for ShadowDOM. Sep 7, 2016
.travis.yml Add Chrome 41 testing Apr 17, 2017
README.md Merge branch 'master' into base Jun 29, 2017
bower.json use wct 6 May 15, 2017
cloudydom.min.js Merge branch 'master' into base Jun 29, 2017
cloudydom.min.js.map Merge branch 'master' into base Jun 29, 2017
gulpfile.js Merge branch 'master' of github.com:webcomponents/shadydom Jun 29, 2017
package.json 1.0.7 Jun 29, 2017
wct.conf.json

README.md

cloudydom

cloudydom is a shim for ShadowDOM. It is a fork of webcomponents/shadydom, with some bug fixes not present in that project.

Install

Yarn:

yarn add cloudydom

Why fork

shadydom is maintained by the Polymer team. They've done fantastic work creating a workable polyfill. However some problems have persisted:

  • Although it is regularly committed to, only issues discovered by Polymer are addressed.
  • Pull requests made by non-Polymer devs are ignored.
  • Issues filed by non-Polymer devs are usually not commented on, even to say "sorry, we do not have time for this right now."
  • There hasn't yet been any releases, so using the polyfill through a package manager is difficult.
  • Test infrastructure exists but without instructions on how to run the tests it's difficult (impossible?) to add new tests.

cloudydom seeks only to address these community issues. Our plan is to:

  • Do regular releases as issues are fixed. cloudydom is 1.0 on npm and bower right now.
  • If you submit a good PR that gets merged, you'll be added a contributor and have push access like anyone else.
  • Answer issues in some way. No one is obligated to fix issues, of course, but we'll at least let you know that a PR is welcome!
  • Fix the test infrastructure and set up CI so that the project can be maintained with confidence.
  • Regularly pull from webcomponents/shadydom#master so that any bug fixes that happen there are fixed in cloudydom as well.

Usage

Usage of the shim is transparent when attachShadow is unavailable. Elements are patched as needed to report ShadowDOM correct DOM information. Only DOM tree accessors and mutation api is maintained. Some DOM api (for example MutationObservers) is not shimmed.

To force cloudydom to be used even when native ShadowDOM is available, set the ShadyDOM = {force: true} in a script prior to loading the polyfill.

Example

<div id="host"></div>
<script>
  host.attachShadow({mode: 'open'});
  host.shadowRoot.appendChild(document.createElement('a'));
</script>

Building and Testing

For building and testing, first run

npm install
bower install

To build, make sure gulp is installed and gulp.

To test, run npm test

Limitations

cloudydom distribution is asynchronous for performance reasons. This means that the composed DOM will be available 1 microtask after the DOM mutation occurs. For testing, ShadyDOM.flush may be called to force synchronous composition.

ShadowDOM compatible styling is not provided with the ShadyDOM shim. To shim ShadowDOM styling, use the shadycss shim.

You can’t perform that action at this time.