使用Polymer 2.x,我有一个明显的问题,如果我有一个自定义元素将一个元素附加到自定义元素的本地dom然后css在运行firefox或edge时错误地应用于主文档,但在chrome中很好 .

例如:

<!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

是否将<style>元素添加到支持的本地dom中?