Polymer.js의 의사 요소 사용

Question

Polymer.js로 첫 걸음을 내딛겠습니다. 의사 요소 생성에 어려움을 겪고 있습니다.

이것은 내가 뭘하려 : 내 호스트 문서에서

: 내 사용자 지정 요소에서

<style type="text/css"> 
    #host::x-a-cool-test { 
    color: green; 
    } 
</style> 

<div id="host"> 
    <my-custom-element></my-custom-element> 
</div> 

:

<element name="my-custom-element"> 
    <template> 
    <style> 
     @host { 
     * { display: block; color: blue; } 
     }   
    </style> 
    <div id="group" pseudo="x-a-cool-test"> 
     just some text 
    </div> 
    </template> 
    <script> 
    Polymer.register(this); 
    </script> 
</element> 

파란색 just my text을 보여줄 것이다. this에 따르면 @host에 포장 된 규칙은 상위 페이지의 모든 선택기보다 높은 특이성을 갖기 때문에 정확합니다.

내 질문 :

내 템플릿의 @host 블록 내부에서 color: blue을 삭제하는 경우는, 텍스트에 표시된 검은 내가 예상하는대로하지 녹색. 왜 그게 ???

Answer 1

나는 당신이 그것을 원하는 방식으로 this plunker라고 믿습니다. 기본적으로 CSS 의사 요소는 사용자 정의 요소 (이 경우 my-custom-element)에 직접 적용해야합니다. 나는 id="host"을 (부모가 아닌 div 대신에) 바꿨고 코드가 잘 작동했다.

<div> 
    <my-custom-element id="host"></my-custom-element> 
</div> 

참고 : @ 호스트 may change의 최우선 성격. 일부 (나 자신 포함)는 기본 fallback 스타일을 제공하는 것이 더 중요하다고 생각합니다. 이 경우 호스트 문서의 규칙이 다른 방법 대신 @host 규칙을 무시합니다.