如何在Polymer 2.0中启用Shady DOM？

Question

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 DOMwindow.Polymer = {dom: 'shady'}.如何切换到Shady DOM？

Answer 1

Shady DOM垫片是从2.0中的Polymer中分解出来的,并移入了v1 Web Components polyfill.

要启用Shady DOM(而不是默认的Shadow DOM),请window.ShadyDOM在导入v1之前定义以下对象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