사용자 정의 요소의 CSS 선택기

Angular2 사용자 정의 요소를 직접 양식화하고 CSS 선택자로 선택하는 데 금기 사항이 있습니까?사용자 정의 요소의 CSS 선택기

예 :

// HTML 
<My-Page> 
    <header></header> 
    <main></main> 
    <My-Footer class="sticky-footer"></My-Footer> 
</My-Page> 

// CSS 
My-Page { 
    background-color: grey; 
} 

header { 
    ... 
} 

.sticky-footer { 
    position: absolute; 
}

좋은 또는 나쁜 연습?

출처

2016-09-16 DlafCreative

당신은 >>>/깊은 피어싱 CSS 콤비를 사용하여 /이 그것을 모듈화를 중단 완벽하게 유효하지만 ::

styles: [ 
    ` 
    :host { background-color: grey; } 

    :host >>> header{ 
     background:yellow; 
    } 

    :host >>> My-Footer{ 
     position: absolute; 
    }   
    ` 
], 
template: 
` 
<My-Page> //<----no need as this becomes your :host 

    <header></header> 
    <main></main> 
    <My-Footer class="sticky-footer"></My-Footer> 

</My-Page> //<----no need 
`

출처

2016-09-16 09:42:46 micronyks

'>>>'와'/ deep /'(같은 것)은 각도의 에뮬레이트 된 그림자 DOM에서만 작동합니다. 네이티브 Shadow DOM으로 전환하면 깨질 것입니다. ':: shadow'와'/ deep /'는 더 이상 사용되지 않습니다. – j2L4e

이러한 스타일을 전역 CSS 파일 (styles.css)에 배치하고 구성 요소 스타일에 배치하지 않으려면 어떻게해야합니까? 예를 들어, index.html에 루트 사용자 정의 태그 으로 인해 몇 가지 문제가 있습니다. 나는 기본적으로 높이를 설정해야한다 : 100 %. – DlafCreative

그림자한다.

내-page.component.css

:host{ 
    background-color: grey; 
} 

header { 
    ... 
} 

.sticky-footer { 
    position: absolute; 
}

이 같은 일을 달성하고 구성 요소에 MyPageComponent에 중요합니다 CSS를 포함합니다 : 구성 요소는 자신의 루트 요소 스타일을 지정할 수 있습니다.

출처

2016-09-16 09:45:18 j2L4e

ealier RC4 : host child-component {..} 작동하는 데 사용됩니다. 이것은 더 이상 안정적인 릴리스에서 작동하지 않습니다. 따라서 하위 구성 요소로 하위 구성 요소로 설정된 하위 구성 요소 스타일을 다음과 같이 이동해야했습니다. 호스트 {...} .. 희망이 누군가를 도와줍니다 .. – user3869623

사용자 정의 요소의 CSS 선택기

답변

관련 문제