Using Polymer 2.x, I have an apparent problem that if I have a custom element which appends a element to the custom elements' local dom then the css is incorrectly applied to the main document when running firefox or edge, but is fine in chrome.
For example:
<!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>
Refer http://jsbin.com/tizazadebe/edit?html,output
Is adding a <style> element to local dom supported like this?