[Javasctipr] Shadow DOM 사용법

    - 쉐도우 돔으로 설정하면 전역 개체들과 분리된다.

    - 전역으로 쓰이는 CSS style이 적용되지 않는다.

    - 자바스크립트는 쉐도우 돔에 있어도 전역으로 동작한다.

 

쉐도우 돔 만들기

 

- 기본 소스

        - 호스트( shadow host)

<div class="shadow-host">

    <div>host</div>

</div>



    - 호스트에 shadow 붙히기 , attachShadow()

const shadowEl = document.querySelector(".shadow-host");

const shadow = shadowEl.attachShadow({mode: 'open'});

        호스트가 안보이게 됨



    - 쉐도우 돔 붙히기

const dom = document.createElement("div");

dom.innerHTML = `shadow dom`;

shadow.appendChild(dom);



//------------------------------

    - CSS selector로 노드 검색 방법

var shadowroot = shadowEl.shadowRoot;

let ret = shadowroot.querySelector("div");



//---------------

// 참고

https://wit.nts-corp.com/2019/03/27/5552

 

 

Posted by 코덴스

댓글을 달아 주세요