如何在Polymer 2.0中启用Shady DOM？

Posted 2021-04-12

Polymer 1.x默认使用Shady DOM，但可以在初始化时通过在导入window.Polymer之前设置polymer.html对象来更改，如下所示：

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

然而，似乎Polymer 2.0使用Shadow DOM而不管window.Polymer = {dom: 'shady'}。如何切换到Shady DOM？

答案

Shady DOM垫片是factored out of Polymer in 2.0并移入v1 Web Components polyfill。

要启用Shady DOM（而不是默认的Shadow DOM），请在导入v1 window.ShadyDOM之前定义以下webcomponents-lite.js对象：

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

codepen

更新：更简单的设置是在[shadydom]标签上指定<script>：

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

codepen