Menu
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?
851
To enable shadow dom in chrome browser open Developer tools by Ctrl+Shift+I. Click on 3 vertical dots on the top right corner of dev tools before close button. Now click on settings there you will find “Show user agent shadow DOM” checkbox under the Elements section in General Tab.
Shadow DOM is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtree inside your element. Read more on Web Fundamentals.
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.
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
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With