템플릿 스타일을 외부로 만들 수 있나요?

Question

~ 안에 Google 폴리머 강의 1, 인라인 스타일시트를 포함하는 예가 있습니다.CSS 파일로 옮기고 싶은데 스타일이 템플릿 태그 안에 있습니다.설상가상으로,

그림자 돔 트리 안에 사용되는 : 호스트 의사 클래스는 트리를 호스팅하는 요소와 일치합니다.이 경우 요소와 일치합니다.

큐:이 스타일을 CSS 파일로 이동할 수 있나요?

Answer 1

사용자 정의 요소 Shadow DOM의 일부인 요소의 스타일을 지정하려면 다음을 사용해야 합니다. ::shadow 선택자 또는 /deep/ Shadow DOM 내부에 있는 레벨 수에 상관없이 요소를 선택하려는 경우 선택기를 사용하세요.

따라서 외부에서는 다음과 같은 스타일을 지정합니다. p 내부에 있는 요소 x-foo의 Shadow DOM은 다음과 같습니다.

x-foo::shadow p {

}

여기에서 모든 내용을 읽을 수 있습니다. http://www.polymer-project.org/articles/styling-elements.html

Answer 2

이 페이지에서 시드 요소를 다운로드하는 경우 (또는 그냥나열된 내용을 살펴보십시오.) 외부 CSS 파일을 사용하는 것이 표시됩니다.요소 HTML을 검사하여 사용 방법을 확인할 수는 있지만 매우 간단합니다.

<polymer-element name="seed-element" attributes="notitle author">

  <template>

    <link rel="stylesheet" href="seed-element.css" />

    <h1>Hello from seed-element</h1>
    <content></content>

  </template>
  <script>

    Polymer('seed-element', {
      //...
    }
  </script>
</polymer-element>

.

그런 다음 seed-element.css 기본적으로 다음과 같습니다.

:host {
  display: block;
}

.

내가 그것을 이해하는 방법 (제한된 지식에서)은 씨앗 요소를 my-element로 바꾸려면

와 동일합니다.

my-element {
  display: block;
}

.