Shadow DOM 이해 및 사용 시기

Shadow DOM 이해 및 사용 시기

Shadow DOM은 개발자가 요소를 캡슐화하고 스타일을 분리하는 데 도움이 되는 최신 웹 개발 툴킷의 강력한 기능입니다. 기본적으로 Shadow DOM을 사용하면 페이지의 나머지 부분과 완전히 격리된 요소 내에 "미니 DOM"을 생성할 수 있습니다. 즉, 이 Shadow DOM 내부의 CSS와 JavaScript는 외부의 어떤 것도 방해하지 않으며 그 반대의 경우도 마찬가지입니다.

Shadow DOM이 해결하는 주요 문제 중 하나는 CSS 스타일 누출입니다. 즉, 애플리케이션의 한 부분에 정의된 스타일이 의도치 않게 다른 부분에 영향을 미쳐 예측 가능성이 부족하고 코드 유지 관리가 어려워지는 것입니다. Shadow DOM은 스타일 경계를 생성하여 이 문제를 방지합니다.

다음은 Shadow DOM이 특히 유용한 사용 사례의 예입니다.

Hexabot 위젯과 같은 챗봇 위젯을 여러 웹사이트에 삽입하고 싶다고 상상해 보세요. 이러한 각 웹사이트에는 자체 CSS가 있으며 일부 스타일은 위젯의 모양과 동작을 방해할 수 있습니다. 예를 들어 웹사이트에는

에 대한 전역 스타일이 있을 수 있습니다. 요소가 있으며, 위젯의 요소가 단순히 DOM에 추가되면 해당 스타일이 위젯의 ​​모양과 느낌을 바꿀 수 있습니다.

웹사이트의 CSS가 위젯의 CSS와 충돌하는 것을 방지하려면 Shadow DOM을 활용하여 위젯을 캡슐화할 수 있습니다. 이를 설명하는 간단한 예는 다음과 같습니다.

Shadow DOM이 없는 경우:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  const el = React.createElement;
  const domContainer = document.getElementById('hb-chat-widget');
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    domContainer,
  );
</script>

이 예에서는 웹사이트의 전역 스타일이 위젯의 ​​모양을 방해할 수 있습니다.

Shadow DOM의 경우:

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  // Create the shadow root and attach it to the widget container
  const widgetContainer = document.getElementById('hb-chat-widget');
  const shadowRoot = widgetContainer.attachShadow({ mode: 'open' });

  // Create a new div inside the shadow root to serve as the rendering target
  const shadowContainer = document.createElement('div');
  shadowRoot.appendChild(shadowContainer);

  // Add styles inside the shadow root by importing the CSS file into the shadow DOM
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = './style.css';
  shadowRoot.appendChild(linkElement);

  // Render the widget inside the shadow root
  const el = React.createElement;
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    shadowContainer,
  );
</script>

이 버전에서는 위젯이 섀도우 루트 내부에 렌더링됩니다. 즉, 웹사이트에 정의된 스타일은 위젯에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다. 위젯의 CSS 스타일은 격리된 상태로 유지되므로 위젯이 포함된 모든 웹사이트에서 일관된 모양을 보장합니다.

Shadow DOM은 언제 사용해야 할까요?

Shadow DOM은 애플리케이션의 다른 부분에 영향을 주지 않거나 영향을 주지 않는 독립형 구성 요소를 생성해야 할 때마다 유용합니다. 사용을 고려해야 하는 몇 가지 시나리오는 다음과 같습니다.

• 위젯 또는 플러그인: 다양한 환경에 삽입할 수 있는 재사용 가능한 위젯을 개발할 때 Shadow DOM을 사용하면 외부 CSS 충돌을 방지할 수 있습니다.
• 복잡한 UI 구성요소: 스타일을 엄격하게 제어하려는 슬라이더, 캐러셀 또는 기타 UI 구성요소와 같은 맞춤 요소를 구축하는 경우
• 격리 요구 사항: 의도하지 않은 상호 작용을 방지하기 위해 CSS와 JavaScript를 완전히 격리해야 하는 모든 시나리오.

Shadow DOM은 구성 요소의 스타일과 동작을 캡슐화함으로써 개발자가 재사용 가능하고 강력한 모듈식 웹 구성 요소를 구축하는 데 중요한 도구가 될 수 있습니다.

Hexabot 라이브 채팅 위젯은 이 방법을 사용하여 외부 스타일의 간섭 없이 다양한 웹사이트에서 원활하고 일관된 사용자 경험을 보장합니다. 이 작업이 실제로 수행되는 모습을 보고 싶다면 언제든지 Hexabot을 확인하고 GitHub 저장소에 별표를 표시하여 프로젝트를 지원하세요!

 
 Hexabot Github 저장소에 별표 표시 ⭐
 

위 내용은 Shadow DOM 이해 및 사용 시기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css if for using dom this github ui issue

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.