爲什麼我的CSS在我的模板之外生效？

我正在將包含模板的Web組件導入index.html。爲什麼my-template中的樣式對index.html中的段落有影響。爲什麼我的CSS在我的模板之外生效？

換句話說，爲什麼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>

來源

2015-02-24 Ben

您應該首先創建影子根隱藏你的模板DOM到影子：

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

實時預覽：http://plnkr.co/edit/QrvYEUYvzIfstUEoD4Od?p=preview

來源

2015-02-25 09:40:08 mudasobwa

我想你想要的是一個scoped stylesheet。嘗試添加scoped屬性：

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

來源

2015-02-24 21:09:23

感謝強調這一點，但我很明確談論Web組件。有沒有辦法，使用Web組件技術（模板，自定義元素，影子DOM，HTML導入）來範圍CSS？ Chrome IIUC不再支持scoped屬性。 – Ben 2015-02-24 21:14:24

爲什麼我的CSS在我的模板之外生效？

回答

相關問題