javascript - External stylesheets for shadow dom in web components - Stack Overflow

admin管理员组

文章数量:1345307

I'm learning web ponents with a shadow root and can't seem to find on google if loading external stylesheets is possible with out-of-the-box code? I am NOT using polymer or any other web ponent library (yet). Code below:

<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
    var hollaProto = Object.create(HTMLElement.prototype);
    hollaProto.createdCallback = function () {
        var shadow = this.createShadowRoot();
        var content = document.querySelector('link[rel=import]').import.querySelector("div");

        $("button[data-mand=holla]", content).on("click", function () { alert("Holla!"); });

        shadow.appendChild(content);
    };
    var hollaWidget = document.registerElement("holla-back", {
        prototype: hollaProto
    });
</script>
<div class="holla-back">
    <button data-mand="holla">Holla!</button>
</div>

If I put my link tag up top, above the first script tag, I style the whole web age, but not the web ponent.

If I put it under div.holla-back it doesn't style anything.

How do you use external stylesheets with web ponents?

I'm learning web ponents with a shadow root and can't seem to find on google if loading external stylesheets is possible with out-of-the-box code? I am NOT using polymer or any other web ponent library (yet). Code below:

<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
    var hollaProto = Object.create(HTMLElement.prototype);
    hollaProto.createdCallback = function () {
        var shadow = this.createShadowRoot();
        var content = document.querySelector('link[rel=import]').import.querySelector("div");

        $("button[data-mand=holla]", content).on("click", function () { alert("Holla!"); });

        shadow.appendChild(content);
    };
    var hollaWidget = document.registerElement("holla-back", {
        prototype: hollaProto
    });
</script>
<div class="holla-back">
    <button data-mand="holla">Holla!</button>
</div>

If I put my link tag up top, above the first script tag, I style the whole web age, but not the web ponent.

If I put it under div.holla-back it doesn't style anything.

How do you use external stylesheets with web ponents?

• javascript
• html
• web-ponent
• shadow-dom

Share Improve this question Follow edited Jan 2, 2015 at 19:19 Thinking Sites asked Jan 2, 2015 at 18:12 Thinking SitesThinking Sites 3,5421919 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Link tags are inert in Shadow DOM according to the spec. However, you can use @import, though that has its own performance issues.

The way Polymer works around this is it looks at the link tags and uses xhr to load those styles and apply them.

edit:

The folks working on Shadow DOM are aware of this shorting and that it needs to be fixed. Hopefully in the future we can e up with a system that supports external stylesheets.

Shadow DOM doesn't react to link tags. Infact, Chrome 41 throws an error when you use link tags. We have worked around that limitation by inlining CSS classes at the build time using vulcanize. This turned out to be quite handy in separating your CSS and the ponent definition.

本文标签： javascriptExternal stylesheets for shadow dom in web componentsStack Overflow