그림자 DOM : 호스트 요소가 <body> 인 경우에만 CSS 스타일을 적용하는 방법은 무엇입니까?

<body> 요소의 직계 하위 요소 인 경우 웹 구성 요소에 특수 CSS 스타일을 적용해야합니다. 여기에 지금까지 시도한 것입니다 :그림자 DOM : 호스트 요소가 <body> 인 경우에만 CSS 스타일을 적용하는 방법은 무엇입니까?

/* applies even if the component isn't a direct child */ 
:host(body) { 
    color: red; 
} 

/* never applies */ 
:host(body:host) { 
    color: red; 
} 

/* never applies */  
:host(body:host > my-component) { 
    color: red; 
} 

/* never applies */  
:host(body > my-component:host) { 
    color: red; 
}

브라우저 : 크롬 안정 (32.0.1700.107), 크롬 카나리아 (34.0.1843.3).

출처

2014-02-17 Anton Moiseev

방금'몸> 누군 데-component' 같은 간단한 기존의 CSS를 사용할 수 없습니다? – matewka

@matewka, 할 수 없습니다. Web Components의 핵심은 HTML 및 CSS 캡슐화를 통한 재사용입니다. 구성 요소 자체는 CSS 파일을 참조하므로 CSS 규칙은 Shadow DOM 내부에서 적용 할 수있는 방법으로 구성되어야합니다. 기본적으로 나는 다음과 같은 것을 가지고 놀고있다 : http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-themeing –

미안하지만, 나는 몰랐다. 그럼 너를 도울 수 없어. – matewka

현재 CSS에서 상위 셀렉터가 없으면 이것이 가능하지 않다고 생각합니다.

당신은 크롬 32에서 같은 것을 할 수있다 : 이것은 크롬 32에서 작동

/* @polyfill body > :host h1 */

을 @polyfill 지시어라는 문서 수준 스타일 추가하기 때문에 : body > polymer-foo h1합니다. 그러나 은 Chrome 34에서 작동하지 않습니다. 문서 수준 스타일이 그림자 DOM에 의해 무시되기 때문입니다.

또한 : 호스트는 호스트 요소 자체와 일치합니다. 조상을 일치 시키려면 ancestor()를 사용할 수 있습니다. 죄송합니다. :ancestor(body) > :host h1이 작동하지 않습니다. : 조상 (본문)은 본문의 자손 인 노드로 변환되므로 위의 코드 조각은 polymer-foo > polymer-foo h1으로 다시 작성됩니다.

오늘은 가능하지 않지만 실용적인 DOM 스타일은 아직 초기 단계이므로 실망스러워 앞으로는 더 표현력을 발휘할 수 있기를 바랍니다. 나중에 참조 할 수 있도록

는 그림자 DOM 스타일링 진행 사양의 작업은 여기에서 찾을 수 있습니다 : http://dev.w3.org/csswg/shadow-styling

출처

2014-02-18 18:52:40 robdodson

고마워요, 롭. 그림자 DOM의 현재 상태에서는 괜찮습니다. 불행히도 다트로 웹 앱을 개발하는 유일한 방법은 AngularDart가 NgComponents에 그림자 DOM을 사용한다는 것입니다. –

그림자 DOM : 호스트 요소가 <body> 인 경우에만 CSS 스타일을 적용하는 방법은 무엇입니까?

답변

관련 문제