정보실

웹학교

정보실

html Shadow DOM v1 이해(4)

본문

이벤트 대상 변경 


섀도우 DOM 내에서 트리거 된 이벤트는 쉐도우 경계를 넘어 라이트 DOM을 버블 링 할 수 있습니다. 그러나 Event.target의 값은 자동으로 변경되어 실제 요소가 아닌 섀도 트리가 포함 된 호스트 요소에서 이벤트가 시작된 것처럼 보입니다.


이러한 변경을 이벤트 대상 변경이라고 하며 그 이유는 섀도우 DOM 캡슐화를 유지하기 위한 것입니다. 다음 예를 고려하십시오.


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

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

  shadowRoot.innerHTML = `
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    <ul>
    `;

  document.addEventListener('click', (event) => {
    console.log(event.target);
  }, false);
</script>

이 코드는 shadow DOM의 아무 곳이나 클릭하면 콘솔에 <div id = "host">… </ div>를 기록하므로 리스너는 이벤트를 전달한 실제 요소를 볼 수 없습니다.


그러나 섀도 DOM에서는 대상 변경이 발생하지 않으며 이벤트와 관련된 실제 요소를 쉽게 찾을 수 있습니다.


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

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

  shadowRoot.innerHTML = `
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>`;

  shadowRoot.querySelector('ul').addEventListener('click', (event) => {
    console.log(event.target);
  }, false);  
</script>

모든 이벤트가 섀도우 DOM에서 전파되는 것은 아닙니다. 대상은 대상을 변경하지만 다른 대상은 단순히 무시됩니다. 맞춤 이벤트를 사용하는 경우 구성된 : true 플래그를 사용해야 합니다. 그렇지 않으면 일정이 그림자 경계를 벗어나지 않습니다.


Shadow DOM v0 vs. v1 


Shadow DOM 사양의 원래 버전은 Chrome 25에서 구현되었으며 당시 Shadow DOM v0으로 알려졌습니다. 업데이트 된 사양 버전은 Shadow DOM API의 여러 측면을 개선합니다.


예를 들어, 요소는 더 이상 섀도 DOM을 둘 이상 호스팅 할 수 없으며 일부 요소는 섀도 DOM을 전혀 호스팅 할 수 없습니다. 이러한 규칙을 위반하면 오류가 발생합니다.


또한 Shadow DOM v1은 열린 그림자 모드, 대체 콘텐츠 등과 같은 새로운 기능 세트를 제공합니다. 사양 작성자 중 한 사람이 작성한 v0 및 v1을 포괄적으로 나란히 비교할 수 있습니다. Shadow DOM v1에 대한 자세한 설명은 W3C에서 찾을 수 있습니다.


Shadow DOM v1에 대한 브라우저 지원 


이 글을 쓰는 시점에서 Firefox와 Chrome은 Shadow DOM v1을 완전히 지원합니다. 불행히도 Edge는 아직 v1을 구현하지 않았으며 Safari는 부분적으로 지원합니다. 지원되는 브라우저의 최신 목록은 Can I use에서 확인할 수 있습니다.


Shadow DOM v1을 지원하지 않는 브라우저에서 shadow DOM을 구현하려면 shadydom 및 shadycss 폴리 필을 사용할 수 있습니다.


마무리 


DOM에 캡슐화가 없다는 것은 웹 개발자에게 오랫동안 문제가 되어 왔습니다. Shadow DOM API는 범위가 지정된 DOM을 만들 수 있는 기능을 제공함으로써 이 문제에 대한 훌륭한 솔루션을 제공합니다.


이제 스타일 충돌은 더 이상 문제가 되지 않으며 선택기는 제어 범위를 벗어나지 않습니다. shadow DOM은 위젯 개발자를 위한 게임 체인저입니다. 페이지의 나머지 부분에서 캡슐화 되고 다른 스타일 시트 및 스크립트의 존재에 영향을 받지 않는 위젯을 만들 수 있다는 것은 큰 장점입니다.


앞에서 언급했듯이 웹 구성 요소는 세 가지 주요 기술로 구성되며 섀도 DOM은 핵심 기술입니다. 이 게시물을 읽은 후에는 세 가지 기술이 모두 함께 작동하여 웹 구성 요소를 구축하는 방법을 보다 쉽게 ​​이해할 수 있습니다.



페이지 정보

조회 53회 ]  작성일19-08-07 11:29

웹학교