Aurelia 맞춤 요소가 플렉스 컨테이너 내에서 작동하지 않습니다.

Question

안녕하세요, 최근에 Aurelia에서 사용자 정의 요소를 만들기 시작했습니다. 우리가 설정 한 규칙 중 하나는 사용자 정의 요소에 클래스 이름을 사용할 수 없다는 것입니다.

사용자 지정 요소 자체에 속성이 없으므로 스타일링이 많이 끊어 지므로 이로 인해 문제가 발생합니다.

특히 플렉스 컨테이너에 넣을 때 깨집니다.

나는 :host 셀렉터를 사용하여 사용자 정의 요소의 스타일을 지정할 수 있지만, Aurelia에 대한 언급은 찾을 수 없다.

문제를 설명하기위한 코드가 있습니다 here. 당신이 :host를 사용하려면

<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> 

, 당신은 사용자 정의 요소의 그림자 DOM 내부 <style> 요소에 넣어해야합니다 :

Answer 1

하면 플렉스 항목 div에 사용자 정의 요소를 넣어 http://codepen.io/anon/pen/LWYwxK을

Answer 2

할 수 있습니다 스타일 사용자 지정 요소 좋 ...

문제는 당신이 규칙을 복제해야한다는 것입니다 그것은 사용자 정의 요소에 클래스를 추가하는 것보다 더 나쁜 이 같은 요소 자체를 참조하여 :

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

나는 변화를 표시하도록 codepen을 갈래했습니다 http://codepen.io/anon/pen/ZeEdLL