[javascript] 웹 컴포넌트의 캡슐화된 CSS 스타일링 방법

07 Dec 2023

javascript

웹 컴포넌트는 웹 개발에서 모듈과 같은 구성 요소로 사용되며, 독립적으로 작동하고 재사용 가능한 UI 조각을 생성하는 데 사용됩니다. 웹 컴포넌트는 HTML, CSS 및 JavaScript의 조합으로 구성되어 있으며, 캡슐화된 스타일링을 적용하여 다른 컴포넌트와의 스타일 충돌을 방지하는 것이 중요합니다.

Shadow DOM과 캡슐화된 스타일링

캡슐화된 스타일링을 구현하기 위해 웹 컴포넌트 내에서 Shadow DOM을 사용할 수 있습니다. Shadow DOM은 웹 컴포넌트의 DOM 요소를 캡슐화하고, 외부 요소에서의 스타일 적용을 제어하는 기능을 제공합니다. 각 웹 컴포넌트의 Shadow DOM은 독립적으로 작동하므로, 동일한 스타일 이름을 사용해도 서로 영향을 주지 않습니다.

스타일링 방법

1. 스타일 태그를 통한 스타일링

<template id="my-component-template">
  <style>
    /* 캡슐화된 스타일 */
    .my-component {
      color: red;
      font-size: 16px;
    }
  </style>
  <div class="my-component">
    웹 컴포넌트 내용
  </div>
</template>

<script>
  const template = document.querySelector("#my-component-template");
  const clone = document.importNode(template.content, true);

  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(clone);
    }
  }

  customElements.define("my-component", MyComponent);
</script>

위의 예제에서는 웹 컴포넌트 내부에 <style> 태그를 사용하여 스타일을 정의합니다. 이렇게 정의된 스타일은 웹 컴포넌트 내부에서만 적용되며, 외부 요소에 영향을 주지 않습니다.

2. 외부 CSS 파일을 로드하여 스타일링

<template id="my-component-template">
  <div class="my-component">
    웹 컴포넌트 내용
  </div>
</template>

<script>
  const template = document.querySelector("#my-component-template");
  const clone = document.importNode(template.content, true);

  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(clone);
      
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = "my-component.css";
      shadowRoot.appendChild(link);
    }
  }

  customElements.define("my-component", MyComponent);
</script>

위의 예제에서는 웹 컴포넌트 내부에서 외부 CSS 파일을 로드하여 스타일을 적용합니다. 이렇게 하면 웹 컴포넌트를 사용하는 외부에서도 독립적으로 스타일을 관리할 수 있습니다. CSS 파일의 경로는 href="my-component.css"와 같이 지정하면 됩니다.

결론

웹 컴포넌트는 캡슐화된 CSS 스타일링을 통해 다른 컴포넌트와의 스타일 충돌을 방지하고, 독립적이고 재사용 가능한 UI 조각을 생성할 수 있습니다. Shadow DOM을 활용하여 웹 컴포넌트 내에서 스타일을 캡슐화하고 외부의 스타일 적용을 제어할 수 있습니다.