Question

使用Polymer 2.x，我有一个明显的问题，如果我有一个自定义元素将一个元素附加到自定义元素的本地dom，那么在运行firefox或edge时css会错误地应用于主文档，但是镀铬很好。

例如：

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/webcomponents+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  Click Test and this text will go red in firefox/edge<br>

  <my-element>
  </my-element>

  <dom-module id="my-element">
    <template>
      <button on-click="handleClick">Test</button>
      <div id="wrapper"></div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      class MyElement extends Polymer.Element {
        static get is() { return 'my-element' }

        handleClick() {
          var e = document.createElement('style');
          e.textContent = "* {color: red}";
          Polymer.dom(this.$.wrapper).appendChild(e);
        }
      }

      customElements.define(MyElement.is, MyElement);
    });
    </script>
  </dom-module>
</body>
</html>

参考http://jsbin.com/tizazadebe/edit?html,output

添加＆lt; style＆gt;像这样支持本地dom的元素？

聚合物2.x.火狐/边缘。将样式元素添加到阴影dom泄漏到主文档

0 个答案: