가장 좋은 방법은

같은 요소를 감안할 때가장 좋은 방법은

<polymer-element name="my-custom-element" extends="custom-element"> 
    <!-- extra styling --> 
    <script> 
     Polymer('my-custom-element', { 
      clickContainer: function() { 
       this.super(); 
      } 
     }); 
    </script> 
</polymer-element>

내 문제 :

추가 스타일을 지정하는 가장 좋은 방법은 무엇입니까?
다른 마크 업과 같은 추가 마크 업에서 기본 요소를 래핑 할 수 있습니까?
기본 요소에서 요소를 선택할 수 있습니까? <content select=".stuff">과 같지만베이스의 그림자 마크 업과 같습니다.

출처

2014-07-13 ionelmc

좋은 질문입니다. 나는 아직 당신을위한 답을 가지고 있지 않지만 우리는 그것에 대해 연구하고 있습니다. 특히 우리는 형제의 그림자 뿌리에서 스타일 해결의 처리에 대해 플랫폼/사양 팀과 춤을 추고 있습니다. 나는 당신을 위해 몇 가지 해답을 곧 갖고 싶습니다. –

추가 스타일을 지정하는 가장 좋은 방법은 무엇입니까?

my-custom-element

수퍼 클래스 템플릿을 표시 할 위치에 <shadow></shadow> 요소를 포함하십시오.
새 서식 파일에 스타일 태그를 넣습니다.
는 슈퍼 클래스 템플릿에서 온 요소는이 같은 선택기를 사용하는 스타일 :

:host::shadow .someclass { ... }

아래의 예를 참조하십시오.

나는 (다른 컨테이너와 같은) 추가 마크 업의 기본 요소를 포장 할 수 있습니까?

예, 당신은 당신이 <shadow></shadow> 주위에 원하는 마크 업을 넣을 수 있습니다.

<div> 
    <shadow></shadow> 
</div>

나는 기본 요소에서 요소를 선택할 수 있습니까? <content select=".stuff">과 같지만베이스의 그림자 마크 업과 같습니다. 당신은 그런 식으로 투영 할 수

번호 (그것은 반대 방향으로 다른 모든 예측에서이다).

이전 섀도우 루트에서 노드를 체리 선택하려는 경우 this.shadowRoot.olderShadowRoot에서 직접 노드를 당겨 코드에서 수행 할 수 있습니다. 그러나 수퍼 클래스가 구조에 대한 기대를 가질 수 있기 때문에 이것은 까다로울 수 있습니다.

예제 코드 :

<polymer-element name="my-custom-element" extends="custom-element"> 
<template> 

    <style> 
     /* note that :host::shadow rules apply 
     to all shadow-roots in this element, 
     including this one */ 
     :host::shadow #container { 
     color: blue; 
     } 
     :host { 
     /* older shadow-roots can inherit inheritable 
      styles like font-family */ 
     font-family: sans-serif; 
     } 
    </style> 
    <p> 
    <shadow></shadow> 
    </p> 

</template> 
<script> 

    Polymer('my-custom-element', { 
    clickContainer: function() { 
     this.super(); 
    } 
    }); 

</script> 
</polymer-element>

ProTips :

olderShadowRoot 당신이 <shadow></shadow> 태그를 포함할지 여부를 존재하지만 당신이하지 않는 한이 렌더링 된 DOM의 일부가되지 않습니다.
olderShadowRoot(s)이 생성되지 않도록하려면 parseDeclarations (source)을 무시할 수 있습니다. parseDeclarations, parseDeclaration, fetchTemplate 중 하나는 다양한 효과를 위해 무시할 수 있습니다.

출처

2014-07-15 18:26:53

# 4의 예를 설명 할 수 있습니까? (왜 특정 선택기가 필요한지?) 스타일을 바꾸는 다른 방법이 있습니까? – ionelmc

오늘 네이티브 동작은 특정 그림자 루트에 대한 그림자 루트의 스타일 범위를 지정하는 것입니다. 그러나,': host :: shadow' 셀렉터는 상속 된 섀도우 루트를 포함하여 현재 호스트의 _all_ shadow-roots를 참조합니다. 이것은 무딘 도구이지만': host :: shadow .foo'가 현재 호스트의 모든 그림자 루트에서'foo' 클래스로 스타일을 지정할 수있게합니다. '\ deep \\ '결합자를 통해 스타일을 지정할 수도 있지만, 이것은 또한 둔탁합니다. 우리는 여기에 인체 공학 개선을위한 메타 시스템을 실험하는 것뿐만 아니라 스펙을 추진하고 있습니다. [core-style] (https://github.com/polymer/core-style)을보십시오. –

왜 '

가장 좋은 방법은

답변

관련 문제