如何設計Dart Web組件的內部元素？

我在達特「蜜蜂」 Web組件封裝（bee）如何設計Dart Web組件的內部元素？

然而，酥料餅的部件打，我看不到改變的組件的內部元素的默認樣式的一種方式。我想改變<div class="x-popover-dialog">的風格，使它具有圓角。但是，如果我將以下內容添加到我的應用程序的css文件中，它會在到達「out」文件夾時被刪除。

.x-popover-dialog { 
    border-radius: 6px; 
}

這是可能的，還是實際修改Web組件本身（或者擴展它）的唯一方法？

謝謝。

來源

2013-05-14 mark

好的，這裏有很多因素。首先，你不能重新定義組件中定義的類。如果該元素未指定其自己的樣式，則當前可以將自己的樣式應用於組件。例如，您可以更改組件內'p'元素的字體大小。或者說div#someid { color: red; }但你不能重新定義一個類，或者將定義添加到一個類中。

除非明確允許，否則您完全可以修改樣式的事實是web_ui中的一個錯誤。目前追蹤爲：Issue 374：支持apply-author-styles。

理想情況下，實現完全支持時，除非Web組件本身明確允許，否則您將無法將自己的樣式應用於Web組件。有關apply-author-styles和相關reset-style-inheritance的更多信息，請參閱教程中的偉大Shadow DOM 201。

來源

2013-05-15 14:12:55

感謝您的回答。因此，基本上，除非組件的作者明確指定「apply-author-styles = true」，或者允許通過自定義僞元素或CSS變量創建樣式，否則基本上無法設置Web組件的樣式。絕對是小部件創作者銘記的東西。 – mark 2013-05-16 13:31:55

當然。組件的目標是提供一個完整的，可重用的標記，就像一個元素一樣。但我們並不總是希望允許更改我們的格式（請在頁面上使用Google+按鈕，您不應該將背景顏色更改爲臉書藍色）。但正如你所說，隨着開發的進展，小部件創建者需要記住，也許我們並不都想要黑白元素。 =）一個很好的解決方案是讓作者允許樣式，然後將類應用到組件的各個部分，但不要自己指定該類。這使用戶可以很好地定義類。 – 2013-05-16 17:23:21

如何設計Dart Web組件的內部元素？

回答

相關問題