[Javasctipr] Shadow DOM 사용법

[Javasctipr] ShadowDOM 사용법

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

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

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

 

쉐도우 돔 만들기

 

- 기본 소스

 

        <div id="shadow">

            shadow

        </div>

 

        <template id="temp">

            <style>

                div {

                    font-size: 20pt;

                }

            </style>

            <div>

                템플릿

            </div>

        </template>

<script>

        //shadow dom 만들기

        const shadowEl = document.querySelector("#shadow");

        const shadow = shadowEl.attachShadow({ mode: "open" }); //쉐도우 돔 생성

             // shadow = shadowEl.shadowRoot

       //const shadow = shadowEl.createShadowRoot();//다른 생성 방법, 쓰면 안됨, Deprecated

            // - shadowEl 보이지 않게 변함

 

        let temp = document.querySelector("#temp");

        var clone = temp.content.cloneNode(true); //복사

        shadow.appendChild(clone); //추가

</script>

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

    - CSS selector로 노드 검색 방법

var shadowroot = shadowEl.shadowRoot;

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

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

// 참고

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