19

半再利用可能なウィジェットを作成しようとしていますが、問題が発生しています。Webページの残りの部分に影響を与えないように、シャドウルート内にいくつかのCSSコードをカプセル化しようとしていますが、このCSSは複数のウィジェットで使用されるため、リモートスタイルシートを含めようとしています. 私が見つけた例のどれもリモート スタイル シートを使用しておらず、これが可能かどうか疑問に思っていました。

元：

<template id="templateContent">
    <head>
        <link rel="stylesheet" href="css/generalStyle1.css">
    </head>
    <body>
        <div class="affectedByGeneralStyle1"></div>
    </body>
</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>
4

4 に答える 4

24

私は最近同じ問題に遭遇しました。

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

追加情報: これは正常に機能しましたが、ハード リロード後に Chrome がこれらのリソースをリロードしていないように見えるため、キャッシュの問題が発生しています。

于 2014-04-25T07:31:13.090 に答える
1

実際には、ポリマーにはcssリンクをロードするための内部ユーティリティがあります。ポリマー内部cssプロセッサを使用するjavascript関数を実装しました。実行時にcssリンクを追加したい場合は、それを使用できます:

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());
                    }
                });
            }
        }
});

注: このコードを実行するには jquery が必要です

于 2015-04-02T13:25:07.107 に答える