polymer - 如何在 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 DOM，不管 window.Polymer = {dom: 'shady'} .如何切换到 Shady DOM？

Answer 1

Shady DOM 垫片是 factored out of Polymer in 2.0并移入 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