Question

我正在将包含模板的网络组件导入index.html。为什么my-template中的样式会对index.html中的段落产生影响。

换句话说，为什么index.html中的所有文字都呈现为蓝色？

我认为模板中的CSS在某种程度上是命名空间的。情况不是这样吗？

index.html

<!DOCTYPE html>
<html>
    <head>
        <style> p { color: red; }</style>
        <link rel="import" href="my-component.html"/>
    </head>
    <body>
        <p>FOO</p>
        <my-component></my-component>
    </body>
</html>

my-component.html

<template id="my-template">
    <style>
    p {
        color: blue;
    }
    </style>
    <p class="foo">BAR</p>
</template>
<script>
(function() {

    var importDoc, myComponentProto;

    importDoc = document.currentScript.ownerDocument;
    myComponentProto = Object.create(HTMLElement.prototype);

    myComponentProto.createdCallback = function() {
        var template1, template1Clone;

        template1 = importDoc.querySelector('#my-template');
        template1Clone = importDoc.importNode(template1.content, true);

        this.appendChild(template1Clone); // Insert into the DOM.
    };

    document.registerElement('my-component', {
        prototype: myComponentProto
    });

}())
</script>

Answer 1

我认为你想要的是scoped stylesheet。尝试添加scoped属性：

<style scoped>
    p {
        color: blue;
    } 
</style>

Answer 2

您应该首先创建阴影根以将模板dom隐藏到阴影中：

myComponentProto.createdCallback = function() {
  var shadow = this.createShadowRoot();
  shadow.appendChild(importDoc.querySelector('#my-template').content);
};

实时预览：http://plnkr.co/edit/QrvYEUYvzIfstUEoD4Od?p=preview

为什么我的CSS在我的模板之外生效？

2 个答案: