Shadow DOM：如果主機元素爲<body>，如何應用CSS樣式？

如果它是直接子元素<body>，我必須將特殊CSS樣式應用於我的Web組件。以下是我試過到目前爲止：Shadow DOM：如果主機元素爲<body>，如何應用CSS樣式？

/* applies even if the component isn't a direct child */ 
:host(body) { 
    color: red; 
} 

/* never applies */ 
:host(body:host) { 
    color: red; 
} 

/* never applies */  
:host(body:host > my-component) { 
    color: red; 
} 

/* never applies */  
:host(body > my-component:host) { 
    color: red; 
}

瀏覽器：Chrome的穩定（32.0.1700.107），Chrome Canary版（34.0.1843.3）。

來源

2014-02-17 Anton Moiseev

你就不能使用簡單的傳統CSS，像'體>。我-component'？ – matewka

@matewka，我不能。 Web組件的全部重點是通過HTML和CSS封裝的可重用性。組件本身引用了CSS文件，所以CSS規則應該被構建爲適用於Shadow DOM內部的方式。基本上我正在玩這樣的東西：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-themeing –

對不起，我不知道。然後我幫不了你。 – matewka

我不認爲這是目前可能沒有父母選擇器在CSS中。

你可以做這樣的事情在Chrome 32：

/* @polyfill body > :host h1 */

此作品在Chrome 32，因爲@polyfill指令增加了文件級的風格，說：body > polymer-foo h1。但是，這不適用於Chrome 34，因爲Shadow DOM會忽略文檔級別樣式。

另外，主機現在只能匹配主機元素本身。如果你想嘗試匹配祖先，你可以使用：ancestor（）。不幸的是:ancestor(body) > :host h1將無法正常工作。：祖先（屍體）被翻譯成任何節點，它是身體的後裔，所以上面的片段將被重寫爲polymer-foo > polymer-foo h1。

今天這是不可能的，但令人失望的是，Shadow DOM風格仍處於初始階段，希望未來能夠更具表現力。

以供將來參考，影子DOM造型進行規範的工作可以在這裏找到：http://dev.w3.org/csswg/shadow-styling

來源

2014-02-18 18:52:40 robdodson

謝謝，羅布。對於Shadow DOM的當前狀態來說，這很好，但不幸的是，它是現在用Dart開發Web應用程序的唯一方法，我的意思是AngularDart使用Shadow DOM作爲NgComponents。 –

Shadow DOM：如果主機元素爲<body>，如何應用CSS樣式？

回答

相關問題