Use a remote stylesheet inside a template tag (with shadow dom)

Asked 19/4, 2014 at 22:32 Answered 20/3, 2019 at 19:15

Solved css html stylesheet shadow-dom templatetag

I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible.

EX:

<template id="templateContent">
    <head>
        <link rel="stylesheet" href="css/generalStyle1.css">
    </head>
    <body>
        <div class="affectedByGeneralStyle1"></div>
    </body>
</template>

script to include template:

<div id="host"></div>
<script>
    var importedData = (html_import_element).import.getElementById("templateContent");
    var shadow = document.querySelector('#host').createShadowRoot();
    var clone = document.importNode(importedData.content, true);
    shadow.appendChild(clone);
</script>

Perpetual answered 19/4, 2014 at 22:32 Comment(1)

Check out the new updated . Now the <link> tag is supported inside shawdow Dom. Check below answer. – Passably 11/1, 2018 at 7:59

I came across the same problem recently. What I ended up doing was using:

<template id="templateContent">
     <style> @import "css/generalStyle.css"; </style>
</template>

Additional info: This worked just fine except that now I'm having some cache issues as Chrome does not seem to reload those resources after a hard reload.

Periwinkle answered 25/4, 2014 at 7:31 Comment(2)

stylesheets in shadow dom are available in chrome 54 developers.google.com/web/fundamentals/getting-started/primers/… – Periwinkle 17/10, 2016 at 17:32

i made a little local demo, and the template dont use the main html css, is this correct? – Illicit 12/12, 2017 at 20:10

Let add to the answer . Now direct tag is supported in shadow dom.

You can directly use

<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">

Check they has been update by whatwg and W3C

Useful link for using css in shadow dom.

https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c

https://github.com/w3c/webcomponents/issues/628

Direct css link can be use in shadow dom

Thanks.

Passably answered 11/1, 2018 at 7:58 Comment(0)

I added the stylesheet's link element directly to the shadow root this way:

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'whatever.css');
this.shadowRoot.appendChild(link);

It seems to work fine. (I called this from the constructor of the component.)

Honebein answered 20/3, 2019 at 19:15 Comment(0)

actually polymer has an internal utility to load css links, i have implemented a javascript function that is using polymer internal css processor,so if you want to add css links at runtime you can use it:

Polymer('my-element', {           
        ready: function () {
           this.importCss("path/myfile.css");
        },
        importCss: function (path) {
             var $shadow = $(this.shadowRoot);
            var $head = $("<div></div>");
            var $link = $("<link rel='stylesheet' type='text/css'>");
            $link.attr("href", path);
            $head.append($link);
            var head = $head[0];
            this.copySheetAttributes = Polymer.api.declaration.styles.copySheetAttributes;
            Polymer.api.declaration.styles.convertSheetsToStyles.call(this, head);
            var styles = Polymer.api.declaration.styles.findLoadableStyles(head);
            if (styles.length) {
                var templateUrl = this.baseURI;
                Polymer.styleResolver.loadStyles(styles, templateUrl, function () {
                    var $style = $shadow.find("style");
                    if ($style.length > 0){
                        $shadow.find("style").append($head.find("style").html());
                    }else{
                        $shadow.append($head.html());
                    }
                });
            }
        }
});

Note: this code needs jquery to run

Stratosphere answered 2/4, 2015 at 13:25 Comment(0)

Recommended topics

Hot tags