Aureliaカスタムエレメントがフレックスコンテナ内で動作しない

Question

最近、Aureliaでカスタムエレメントを作成し始めました。私たちが確立したルールの1つは、クラス名をカスタム要素に使用する際にクラス名を指定できないということです。

カスタム要素自体にはプロパティがないため、多くのスタイルを壊すため、これは私に問題を引き起こしています。

特に、フレックスコンテナに入れたときに破損します。

私は:hostセレクタを使用してカスタム要素のスタイルを設定することができるdevelopers.google.comを読んだことがありますが、これはAureliaの言及が見つかりません。動作させるには苦労しています。

私は問題を示すためにコードを持っていますhere。

Answer 1

フレックス項目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

問題は、あなたがルールを複製する必要がありますし、それがカスタム要素にクラスを追加することよりも悪いことだ...

Answer 2

カスタム要素FIをスタイルすることができます要素自体を参照することにより、次のように：

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

私は変化を示すためにあなたのcodepenをフォークしました：http://codepen.io/anon/pen/ZeEdLL