How do I enable Shady DOM in Polymer 2.0?

Question

Polymer 1.x uses Shady DOM by default, but that could be changed at initialization by setting the window.Polymer object before importing polymer.html as follows:

<script>window.Polymer = {dom: 'shadow'};</script>
<link rel="import" href="polymer.html">

However, it seems Polymer 2.0 uses Shadow DOM regardless of window.Polymer = {dom: 'shady'}. How do I switch to Shady DOM?

Answer 1

The Shady DOM shim was factored out of Polymer in 2.0 and moved into the v1 Web Components polyfill.

To enable Shady DOM (instead of the default Shadow DOM), define the following window.ShadyDOM object before importing the v1 webcomponents-lite.js:

<script>window.ShadyDOM = { force: true };</script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>

codepen

UPDATE: A simpler setting is to specify [shadydom] on the <script> tag:

<script src="webcomponentsjs/webcomponents-lite.js" shadydom></script>

codepen