ShadowDOM: 모든 웹 개발자가 알아야 할 과소평가된 보석

ShadowDOM 이해: 변경되지 않은 웹 구성 요소의 핵심

웹 개발 세계에서 개발자는 재사용이 가능하고 배치된 환경에 독립적이어야 하는 구성 요소를 만드는 임무를 맡는 경우가 많습니다. 여기서 Shadow DOM이 활용됩니다. 이를 통해 개발자는 요소의 내부 구조를 캡슐화하여 주변의 외부 스타일이나 스크립트에 영향을 받지 않게 됩니다.

그런데 이것이 왜 중요한가요? 그리고 내 제품 LiveAPI에 대한 사용자 경험을 어떻게 변화시켰습니까? 자세히 살펴보겠습니다!

ShadowDOM이란 무엇입니까?

Shadow DOM은 호스트 요소 내에서 DOM(문서 개체 모델)의 일부를 격리하는 방법을 제공하는 웹 표준입니다. 이러한 격리는 섀도우 트리의 내부 구조와 스타일이 페이지의 나머지 부분과 별도로 유지된다는 것을 의미합니다. 간단히 말해서 외부 세계로부터 보호되는 DOM 내에 미니 DOM을 만드는 것과 같습니다.

Shadow DOM을 사용하면 페이지의 다른 부분과 충돌하지 않는 방식으로 구성 요소의 HTML, CSS 및 JavaScript를 정의할 수 있습니다. 따라서 재사용 가능하고 모듈식이며 확장 가능한 구성 요소를 구축하는 데 필수적인 도구입니다.

ShadowDOM이 LiveAPI 문제를 해결한 방법

LiveAPI는 Git 저장소를 연결하기만 하면 즉시 API 문서를 작성할 수 있도록 도와주는 제품입니다.

생성된 문서를 대화형으로 만들기 위해 삽입 가능한 LiveAPI 위젯을 개발했습니다. 이것이 우리의 도전이 시작된 곳입니다.

초기 단계에서 우리는 LiveAPI 위젯을 다양한 웹사이트에 삽입할 때 상당한 어려움에 직면했습니다. 우리 위젯은 API 요청을 실행하고 결과를 사용자 친화적인 방식으로 표시하도록 설계되었습니다. 그러나 Shadow DOM이 없으면 다른 페이지 스타일과의 충돌로 인해 위젯이 일부 상황에서 오작동할 수 있다는 사실을 발견했습니다.

잘못된 내용은 다음과 같습니다.

• 스타일 재정의: 위젯의 내부 스타일은 종종 호스트 페이지의 전역 스타일에 의해 재정의됩니다. 이로 인해 위젯이 삽입된 위치에 따라 다르게 표시되어 사용자 경험이 저하되었습니다.
• JavaScript 충돌: 위젯의 JavaScript가 호스트 페이지의 스크립트와 충돌하여 예측할 수 없는 동작을 일으키고 플랫폼 전반에서 일관성을 유지하기 어렵게 만들 수도 있습니다.

여기서 Shadow DOM이 우리를 구해주었습니다. 섀도우 트리 내에 위젯을 캡슐화하여 다음을 보장했습니다.

1. 스타일이 격리됨: 위젯의 내부 CSS는 더 이상 호스트 페이지의 외부 스타일에 영향을 받지 않으므로 삽입된 위치에 관계없이 동일하게 보입니다.
2. 스크립트는 충돌하지 않습니다: 위젯의 JavaScript는 독립적으로 실행되므로 페이지의 다른 스크립트와 충돌할 위험이 줄어듭니다.

그 결과, 사용자가 위젯을 어디에 배치하든 원활하고 일관된 경험을 제공할 수 있었습니다.

ShadowDOM 사용 방법: 코드 예제가 포함된 간단한 가이드

프로젝트에서 ShadowDOM을 사용하는 방법을 살펴보겠습니다.

1. Shadow DOM 생성

ShadowDOM 사용을 시작하려면 기존 요소에 섀도우 루트를 생성해야 합니다. Shadow DOM을 연결하려는 요소에서 attachmentShadow() 메서드를 호출하면 이를 달성할 수 있습니다.

다음은 HTML 요소에 대한 섀도우 루트를 생성하는 방법의 예입니다.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShadowDOM Example</title>


    <div>



<p>In this example:</p>

<ul>
<li>The attachShadow() method creates a shadow root on the #shadow-host element.</li>
<li>The mode: 'open' option means that the shadow DOM is accessible via JavaScript (you can also use mode: 'closed' to make it inaccessible).</li>
<li>Inside the shadow root, we define some CSS and HTML that will be encapsulated within the shadow DOM.</li>
</ul>

<h4>
  
  
  2. <strong>Accessing the Shadow DOM</strong>
</h4>

<p>If you set the shadow DOM’s mode to open, you can access the shadow tree via JavaScript. Here’s an example of accessing and modifying the shadow DOM:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const shadowHost = document.getElementById('shadow-host');
    const shadowRoot = shadowHost.shadowRoot; // Accessing the shadow root

    // Modify the shadow DOM
    const paragraph = shadowRoot.querySelector('p');
    paragraph.textContent = "The shadow DOM content has been updated!";
</script>

이 코드에서는:

• shadowHost.shadowRoot를 사용하여 섀도우 루트에 액세스합니다.
• 그런 다음

  요소를 변경하고 텍스트를 변경합니다.

3. Shadow DOM 내부 스타일링

ShadowDOM 내부 구성 요소의 스타일을 지정해 보겠습니다. 이는 사이트의 나머지 부분과 격리됩니다.

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

    shadowRoot.innerHTML = `
        <style>
            p {
                color: red;
                font-weight: bold;
            }
            div {
                background-color: lightgray;
                padding: 10px;
                border-radius: 5px;
            }
        
        <div>
            <p>This paragraph is styled inside the shadow DOM.
        </script>