외부 CSS가 폴리머 DOM 섀도우 DOM에 영향 (출혈)

나는 뭔가를 놓치고 있어야하지만, 나는 그것을 이해할 수 없다. 그때 간단한 페이지에서 사용 외부 CSS가 폴리머 DOM 섀도우 DOM에 영향 (출혈)

<polymer-element name="test-elem"> 

    <template> 
     <content></content> 
     <div id="container"> 
      <div class="deepinside"> 
      TECK ... CHEST 
      </div> 
     </div> 
    </template> 

    <script> 
     Polymer('test-elem', { 
      applyAuthorStyles: false, 
     }); 
    </script> 

</polymer-element>

: 나는 폴리머로 구현 간단한 사용자 정의 요소가

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 

    <script src="libs/polymer.min.js"></script> 

    <link rel="import" href="test-elem.html"> 

    <style> 
    .deepinside { color: red; } 
    </style> 

</head> 
<body> 
    <test-elem>Hi</test-elem> 
</body> 
</html>

요소의 내부 div (class="deepinside"과)가 빨간색으로 표시됩니다의 내용. 제가 올바르게 이해한다면, 이것은 일어나지 않아야합니다 (this doc 참조). 요소의 생성자에 applyAuthorStyles: false을 명시 적으로 선언했음을 유의하십시오 (기본 동작이므로 필요하지 않아야 함). 왜 외부 CSS가 그림자 DOM의 요소에 영향을 미치는지 이해할 수 없습니다. 나는 심지어 요소의 정의에서 shadowdom 속성을 명시 적으로 시도했지만 결과는 동일합니다.

무엇이 누락 되었습니까?

FWIW, OS X 10.7.5에서 Chrome 버전 31.0.1650.57을 실행 중입니다.

출처

2013-11-23 jorgeh

이것은 known limitation of the Shadow DOM polyfill입니다. 그것은 출혈에서 부품 스타일을 방지 꽤 좋은 일을하지만, 그것은 다른 방법으로 주위에 동일을하지 않습니다.

Here's 사용 사례를위한 코드 en입니다. Chrome 33.0.1717.0 canary (Polymer는 그림자 DOM을 폴리 폴리하지 않음)에서 의도 한대로 작동하지만 31.0.1650.57에서는 작동하지 않습니다.

출처

2013-11-24 07:01:02 CletusW

외부 CSS가 폴리머 DOM 섀도우 DOM에 영향 (출혈)

답변

관련 문제