정보실

웹학교

정보실

html Shadow DOM v1 이해(3)

본문

호스트 요소 스타일링 


일반적으로 호스트 요소의 스타일을 지정하려면 호스트 요소가 있는 위치이므로 CSS를 light DOM에 추가합니다. 그러나 shadow DOM 내에서 호스트 요소의 스타일을 지정해야 하는 경우


여기에서 host() 의사 클래스 함수가 ​​제공됩니다.이 선택기를 사용하면 섀도 루트 내 어디에서든 섀도 호스트에 액세스 할 수 있습니다. 예를 들면 다음과 같습니다.


<div id="host"></div>

<script>
  const elem = document.querySelector('#host');
  const shadowRoot = elem.attachShadow({mode: 'open'});

  shadowRoot.innerHTML = `
    <p>Shadow DOM</p>
    <style>
      :host {
        display: inline-block;
        border: solid 3px #ccc;
        padding: 0 15px;
      }
    </style>`;

</script>

host : host는 섀도우 루트 내에서만 유효합니다. 또한 섀도우 루트 외부에 정의 된 스타일 규칙은 : host에 정의 된 규칙보다 더 높은 특이성을 가지고 있음을 명심하십시오.


예를 들어, #host {font-size : 16px; } 그림자를 뛰어 넘습니다 DOM의 : 호스트 {font-size : 20px; }. 구성 요소의 기본 스타일을 정의하고 구성 요소 사용자가 스타일을 재정의 할 수 있도록 하기 때문에 실제로 유용합니다. 유일한 예외는! 중요한 규칙이며, 이는 shadow DOM 내부에서 더 높은 특이성을 갖습니다.


또한 선택기를 : host ()에 인수로 전달하면 지정된 선택기와 일치하는 경우에만 호스트를 대상으로 지정할 수 있습니다. 즉, 동일한 호스트의 다른 상태를 대상으로 할 수 있습니다.


<style>
  :host(:focus) {
    /* style host only if it has received focus */
  }
 
  :host(.blue) {
    /* style host only if has a blue class */
  }
 
  :host([disabled]) {
    /* style host only if it's disabled */
  }
</style>

컨텍스트에 따른 스타일링 


특정 조상에 있는 섀도우 루트 호스트를 선택하려면 : host-context() 의사 클래스 함수를 사용할 수 있습니다. 예 :


:host-context(.main) {
  font-weight: bold;
}

이 CSS 코드는 host.main의 자손 인 경우에만 섀도 호스트를 선택합니다.


<body class="main">
  <div id="host">
  </div>
</body>

: host-context ()는 작성자가 사용 된 컨텍스트에 따라 구성 요소의 스타일을 지정할 수 있으므로 테마에 특히 유용합니다.


스타일 훅 


shadow DOM의 흥미로운 측면은 "스타일 플레이스 홀더"를 작성하고 사용자가 이를 채울 수 있게 하는 기능입니다. 이는 CSS 사용자 정의 특성을 사용하여 수행 할 수 있습니다. 간단한 예를 살펴 보겠습니다.


<div id="host"></div>

<style>
  #host {--size: 20px;}
</style>

<script>
  const elem = document.querySelector('#host');
  const shadowRoot = elem.attachShadow({mode: 'open'});

  shadowRoot.innerHTML = `
    <p>Shadow DOM</p>
    <style>p {font-size: var(--size, 16px);}</style>`;

</script>

이 그림자 DOM을 사용하면 단락의 글꼴 크기를 무시할 수 있습니다. 값은 사용자 정의 속성 표기법 (— size : 20px)을 사용하여 설정되고 shadow DOM은 var () 함수 (font-size : var (— size, 16px))를 사용하여 값을 검색합니다. 개념적인 측면에서 이것은 <slot> 요소의 작동 방식과 유사합니다.


상속 가능한 스타일 


Shadow DOM을 사용하면 외부에서 선택기 가시성이 없는 격리 된 DOM 요소를 만들 수 있지만 상속 된 속성이 그림자 경계를 통과하지는 않습니다.


색상, 배경 및 글꼴 모음과 같은 특정 속성은 그림자 경계를 통과하고 그림자 트리에 적용됩니다. 따라서 iframe과 비교할 때 그림자 DOM은 매우 강력한 장벽이 아닙니다.


<style>
  div {
    font-size: 25px;
    text-transform: uppercase;
    color: red;
  }
</style>

<div><p>Light DOM</p></div>
<div id="host"></div>

<script>
  const elem = document.querySelector('#host');
  const shadowRoot = elem.attachShadow({mode: 'open'});

  shadowRoot.innerHTML = `<p>Shadow DOM</p>`;
</script>

해결 방법은 간단합니다. all : initial을 다음과 같이 선언하여 상속 가능한 스타일을 초기 값으로 재설정 합니다.


<style>
  div {
    font-size: 25px;
    text-transform: uppercase;
    color: red;
  }
</style>

<div><p>Light DOM</p></div>
<div id="host"></div>

<script>
  const elem = document.querySelector('#host');
  const shadowRoot = elem.attachShadow({mode: 'open'});

  shadowRoot.innerHTML = `
    <p>Shadow DOM</p>
    <style>
      :host p {
        all: initial;
      }
    </style>`;
</script>

이 예제에서 요소는 초기 상태로 되돌려 지므로 그림자 경계를 교차하는 스타일은 적용되지 않습니다.




페이지 정보

조회 78회 ]  작성일19-08-07 11:24

웹학교