Aurelia自定義元素在Flex容器內不起作用

嗨，我們最近開始在Aurelia製作自定義元素。我們建立的規則之一是，我們不能在使用它們時將類名放在自定義元素上。Aurelia自定義元素在Flex容器內不起作用

這對我造成了問題，因爲自定義元素本身沒有任何屬性，因此打破了很多樣式。

特別是當它放在柔性容器內時會折斷。

我已經閱讀developers.google.com，你可以使用:host選擇風格自定義元素，但我不能找到奧裏利亞這個沒有提到，我努力得到它的工作。

我有一個codepen來演示問題here。

2017-02-24 IOIIOOIO

把你的自定義元素在flex項目div：

<div class="half-container"> 
    <p>Breaking because of custom element (Flex container is yellow)</p> 
    <div class="flex-container"> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item green">  
     <o-custom-element></o-custom-element> 
    </div> 
    </div> 
</div>

如果你想使用:host，你必須把它放在你的自定義元素的影子DOM裏面<style>元素：http://codepen.io/anon/pen/LWYwxK

的問題是，你必須複製的規則，它比添加類自定義元素更糟......

來源

2017-02-24 12:24:55 Supersharp

我向變化的規律是瘦，但它不是我的電話。我們在一個大型團隊中工作，因此他們制定了這條規則，試圖將事情控制在一定範圍內。我只是希望我可以創建一個演示，其中主持人使用：主機選擇器從Shadow Dom內部進行了樣式化。這將是一個對我們有用的解決方案。 – IOIIOOIO

@IOIIOOIO我添加了一個使用host的例子。 – Supersharp

哦，哇......那麼容易......萬分感謝，我會像這樣做一些基礎工作。應該是我的頭痛結束！ – IOIIOOIO

你可以風格的自定義元素科幻通過引用元素本身，就像這樣：

o-custom-element { 
    color: white; 
    background: green; 
    flex-grow: 1; 
}

我已經分叉的codepen顯示的變化：http://codepen.io/anon/pen/ZeEdLL

來源

2017-02-24 12:52:38 Daniel

不幸的是我們的另一個規則，我們不能這樣做 – IOIIOOIO

嗯，我總是包括這個組件（其中'：主機'也是，對嗎？）和'require'在組件的視圖中的CSS。國際海事組織與「主機」本身一樣好，基本上它只是它的另一個名稱。但是爲什麼'：host'不適用於Aurelia。 – Daniel

謝謝丹尼爾，我沒有想到這一點。這可能是我做錯了。如果我無法使'：host'工作，那麼我會嘗試''方法。事情是我們整個團隊對定製元素都很陌生，所以我們都在學習。所以我們需要小心，不要讓每次Joe Soap都有新的實現想法時，讓事情失去控制。 – IOIIOOIO

Aurelia自定義元素在Flex容器內不起作用

回答

相關問題