kurtspublishedw3cdrafts/lrlr-polyfill.html at main · KurtCattiSchmidt/kurtspublishedw3cdrafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html>
    <head>

    </head>
    <body>
        <style id="style_tag">
            span {color: blue;}
        </style>
        <span>Light DOM text</span>
        <div>
            <template shadowrootmode="open">
                <link rel="stylesheet" href="#style_tag" />
                <span>Shadow DOM</span>
            </template>

        </div>

            <script>
                document.querySelectorAll("*").forEach(elem => {
                    if(elem.shadowRoot) {
                        elem.shadowRoot.querySelectorAll("link").forEach(link_tag => {
                        if(link_tag.rel == "stylesheet" && (!link_tag.sheet || link_tag.sheet.cssRules.length == 0)) {
                            // Extract the fragment from the link tag's href attribute.
                            const url = new URL(link_tag.href);
                            const fragment = url.hash.substring(1);
                            if(fragment.length > 0) {
                                // Look up the corresponding <style> with said href.
                                let style_tag = document.getElementById(fragment);
                                if(style_tag && style_tag.sheet) {
                                    let css_rule_string = "";
                                    for(let i = 0; i < style_tag.sheet.rules.length; ++i) {
                                        css_rule_string += style_tag.sheet.rules[i].cssText + ";";
                                    }
                                    // Update the link tag with a dataURI with the style rules.
                                    link_tag.setAttribute("href", "data:text/css;base64," + btoa(css_rule_string));
                                }
                            }
                        }
                        });
                    }
                });
            </script>
    </body>
</html>