Polymer element inside shadow dom works, but is not styled

Question

I am working on an app, which uses the custom element API (with webcomponents.js as polyfill). Inside of my element, I want to encapsulate everything in a shadow root. The HTML template of the polymer element seems to be imported correctly, however, styling is missing - unlike when I place the element outside, where styling seems to work:

class TestWC extends HTMLElement {
  createdCallback() {
    console.log('created');
    var ShadowRoot = this.createShadowRoot();
    ShadowRoot.innerHTML = '<paper-input label="Inside shadow root"></paper-input>';
  }
}

var MyTestWC = document.registerElement('test-test', TestWC);
var MyTestWCInst = new MyTestWC();
document.querySelector('#placeholder').appendChild(MyTestWCInst);

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script>
<paper-input label="Outside shadow root"></paper-input>
<p id="placeholder"></p>
<link rel="import" href="https://polygit.org/components/paper-input/paper-input.html" />

Question: Why does the original styling of polymer web components not work inside shadow root?

Edit: here is a Plunker; works in chrome only FTM. http://plnkr.co/edit/rEibVckeUAqqrZljuVEy?p=preview

PS: What would be the preferred 'plunkr-like' platform for visualizing polymer-related issues? plunkr seems not to have the polymer components I use, or at least I did not find it? — Michael K
My favorite service is Codepen if file assets are not needed. Otherwise, Plunker. — tony19
Not my area of expertise, but this might help html5rocks.com/en/tutorials/webcomponents/shadowdom-201 — Clint
Can you try same thing with some simple elements like iron-image or iron-icon. — a1626

getbuckts getbuckts · Accepted Answer · 2016-07-11T16:53:18

Not exactly sure if this is what you are wanted to achieve but this is what I did.

In x-foo.html I added the following in the template section. (paper-input)

<dom-module id="x-foo">
<template>
  <span>{{foo}}</span>
  <paper-input label="Inside shadow root"></paper-input>
</template>
<script>
  Polymer({
    is: 'x-foo',
    properties: {
      foo: {
        type: String,
        value: 'Hello world'
      }
    }
  })
</script>

In your main index.html I did the following:

//document.querySelector('#placeholder').appendChild(MyTestWCInst);

var elem = document.createElement("x-foo");
document.querySelector("#placeholder").appendChild(elem);

I don't think adding just plain innerHTML will trigger polymer to inject its magic.

Polymer element inside shadow dom works, but is not styled

1 Answers