polyfill-next-selector를 사용하는 폴리머 및 고급 CSS 선택기

Question

이 고급 사용 사례는 90 %의 사용 사례에는 적용되지 않지만 여기서는 유용하다고 생각합니다.

나는이 아이들을의 스타일링을 담당하고이

<my-element> 

    <div class="element1"></div> <!-- i am hidden --> 

    <div class="element2"></div> 

</my-element> 

그리고 내 부모 요소처럼 보이는 일부 HTML (구성 요소) 마크 업을 가지고, 그래서 나는 다음과 같은

를 사용할 수 있기 때문에 괜찮아요 말하고 싶지만

polyfill-next-selector { content: ".element1" } 
::content .element1 { display: none; } 

이제 부모 요소가 새 클래스 나 특성을 얻을 때 뭔가 다른 작업을 수행하려고합니다.

<my-element class="showElement1"> 

    <div class="element1"></div> <!-- show me now --> 

    <div class="element2"></div> 

</my-element> 

// Here is the confusing part 
polyfill-next-selector { content: ".element1" } 
:host(.showElement1) ::content .element1 { display: block; } 

크롬에서는 제대로 작동하지만 다른 브라우저에서는 폴리 폴리이 깨집니다.

예를 들어, 다음과 같은 CSS 마크 업이 polyfill에 의해 렌더링 된 것을 볼 수 있습니다.

my-element.showElement1 .element1 { display: block; } 

하지만 생성되지 않습니다.

나는 호스트와 컨텐츠 시스템이 작동하는 방식을 잘못 해석 했는가? 아니면 음식물 처리가 필요한 polyfiller의 버그 일까?

Answer 1

::content과 content: ""으로 혼란스러워졌습니다. 그들은 같은 방식으로 관련이 없습니다.

코드의 content: "" 부분의 내용이 polyfill에 의해 최종 CSS로 읽고 변환되는 것을 알고 있다는 속임수가 있습니다.

polyfill-next-selector { content: ":host.showElement1 .element1" } 

가된다 :

my-element.showElement1 .element1 

그리고 polyfill을 필요로하지 않는 브라우저에서

은 동일하게 유지 (즉,이 글을 쓰는 시점에서 최신 38 크롬). 예 : 마지막으로

:host.showElement1 ::content .element1 {} 

그리고를 제대로 작동하도록, 당신은 다른 사람들이 거기 밖으로는 경우 참조 답변으로 게시이

polyfill-next-selector { content: ':host.showElement1 .element1'; } 
:host(.showElement1) ::content .element1 { 
    display: block; 
} 

처럼 읽을 수 있도록 모두 함께 보관해야 내가 직면했던 동일한 상황에 누가 혼란 스러울 지 모릅니다.