Question

我正在尝试使用聚合物2.0创建没有阴影DOM的自定义元素，以及https://www.polymer-project.org/2.0/start/first-element/step-2

中的以下示例代码

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
  <template>
    <style>
      /* shadow DOM styles go here */
      :host {
        display: inline-block;
      }
      iron-icon {
        fill: rgba(0,0,0,0);
        stroke: currentcolor;
      }
      :host([pressed]) iron-icon {
        fill: currentcolor;
      }
    </style>
    <!-- shadow DOM goes here -->
    <iron-icon icon="polymer"></iron-icon>
  </template>
  <script>
    class IconToggle extends Polymer.Element {
      static get is() {
      return "icon-toggle";
      }
      constructor() {
        super();
      }
    }
    customElements.define(IconToggle.is, IconToggle);
  </script>
</dom-module>

请告诉我是否可以使用Polymer 2.0？

Answer 1

在Polymer2中，默认情况下使用“Shadow-dom”创建自定义元素。如果你想创建一个没有shadow-dom的，你可以强制使用shadyDom。只需将'shadydom'作为属性添加到Web组件脚本调用中。

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

请注意，你将失去与Shady Dom的封装。

Answer 2

你在尝试什么？

＆＃34;我正在尝试创建没有聚合物2.0＆＃34;

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

请告诉我是否可以使用Polymer 2.0？

现在我很困惑？所以你想使用Polymer或你不会使用它？

自定义元素无阴影DOM聚合物2.0

2 个答案: