웹 개발 세계에서 개발자는 재사용이 가능하고 배치된 환경에 독립적이어야 하는 구성 요소를 만드는 임무를 맡는 경우가 많습니다. 여기서 Shadow DOM이 활용됩니다. 이를 통해 개발자는 요소의 내부 구조를 캡슐화하여 주변의 외부 스타일이나 스크립트에 영향을 받지 않게 됩니다.
그런데 이것이 왜 중요한가요? 그리고 내 제품 LiveAPI에 대한 사용자 경험을 어떻게 변화시켰습니까? 자세히 살펴보겠습니다!
Shadow DOM은 호스트 요소 내에서 DOM(문서 개체 모델)의 일부를 격리하는 방법을 제공하는 웹 표준입니다. 이러한 격리는 섀도우 트리의 내부 구조와 스타일이 페이지의 나머지 부분과 별도로 유지된다는 것을 의미합니다. 간단히 말해서 외부 세계로부터 보호되는 DOM 내에 미니 DOM을 만드는 것과 같습니다.
Shadow DOM을 사용하면 페이지의 다른 부분과 충돌하지 않는 방식으로 구성 요소의 HTML, CSS 및 JavaScript를 정의할 수 있습니다. 따라서 재사용 가능하고 모듈식이며 확장 가능한 구성 요소를 구축하는 데 필수적인 도구입니다.
LiveAPI는 Git 저장소를 연결하기만 하면 즉시 API 문서를 작성할 수 있도록 도와주는 제품입니다.
생성된 문서를 대화형으로 만들기 위해 삽입 가능한 LiveAPI 위젯을 개발했습니다. 이것이 우리의 도전이 시작된 곳입니다.
초기 단계에서 우리는 LiveAPI 위젯을 다양한 웹사이트에 삽입할 때 상당한 어려움에 직면했습니다. 우리 위젯은 API 요청을 실행하고 결과를 사용자 친화적인 방식으로 표시하도록 설계되었습니다. 그러나 Shadow DOM이 없으면 다른 페이지 스타일과의 충돌로 인해 위젯이 일부 상황에서 오작동할 수 있다는 사실을 발견했습니다.
잘못된 내용은 다음과 같습니다.
여기서 Shadow DOM이 우리를 구해주었습니다. 섀도우 트리 내에 위젯을 캡슐화하여 다음을 보장했습니다.
그 결과, 사용자가 위젯을 어디에 배치하든 원활하고 일관된 경험을 제공할 수 있었습니다.
프로젝트에서 ShadowDOM을 사용하는 방법을 살펴보겠습니다.
ShadowDOM 사용을 시작하려면 기존 요소에 섀도우 루트를 생성해야 합니다. Shadow DOM을 연결하려는 요소에서 attachmentShadow() 메서드를 호출하면 이를 달성할 수 있습니다.
다음은 HTML 요소에 대한 섀도우 루트를 생성하는 방법의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShadowDOM Example</title>
</head>
<body>
<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>
이 코드에서는:
요소를 변경하고 텍스트를 변경합니다.
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;
}
</style>
<div>
<p>This paragraph is styled inside the shadow DOM.</p>
</div>
`;
</script>
여기서 p 및 div 스타일의 범위는 Shadow DOM으로 지정됩니다. 즉, Shadow Tree 외부 요소에는 영향을 주지 않습니다. 이렇게 하면 페이지의 나머지 부분에 적용된 스타일에 관계없이 구성 요소가 의도한 대로 작동합니다.
요약하자면, Shadow DOM은 주변 환경에 독립적이어야 하는 강력하고 재사용 가능한 구성 요소를 구축하기 위한 획기적인 도구입니다. 이 강력한 기술을 통합함으로써 우리는 어떤 웹사이트에서도 문제 없이 작동하는 LiveAPI 위젯을 만들 수 있었습니다.
LiveAPI에 대해 궁금하신 경우 여기 hexmos.com/liveapi에서 확인하고 문서를 생성해 보세요. 무료로 사용해 보세요!
위 내용은 ShadowDOM: 모든 웹 개발자가 알아야 할 과소평가된 보석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
