웹 컴포넌트 API를 사용할 때 style 적용 방법

웹 컴포넌트 API를 사용하여 inline 스타일을 사용하지 않고 <style> 태그 내에서 CSS를 적용하려면, Shadow DOM을 사용하여 스타일을 컴포넌트 내부에 캡슐화할 수 있습니다. 이렇게 하면 class나 id 값 없이도 스타일을 적용할 수 있습니다.

class MyElement extends HTMLElement {
  constructor() {
    super();

    // Shadow DOM을 생성
    const shadow = this.attachShadow({ mode: 'open' });

    // <style> 태그와 내용을 생성하여 Shadow DOM에 추가
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        background-color: lightblue;
        padding: 10px;
        border: 1px solid blue;
      }

      p {
        color: green;
        font-size: 18px;
      }
    `;

    // <style>를 Shadow DOM에 추가
    shadow.appendChild(style);

    // 컴포넌트 내용
    const div = document.createElement('div');
    const p = document.createElement('p');
    p.textContent = 'This is a styled paragraph inside a custom element!';
    div.appendChild(p);

    // div를 Shadow DOM에 추가
    shadow.appendChild(div);
  }
}

// 웹 컴포넌트 정의
customElements.define('my-element', MyElement);

1. shadowRoot를 사용하여 웹 컴포넌트에 캡슐화된 스타일을 적용합니다.
2. <style> 태그를 사용하여 컴포넌트 내부에 CSS를 추가합니다.
3. :host 선택자를 사용하여 웹 컴포넌트 자체에 스타일을 적용하고, p 태그와 같은 내부 요소에도 스타일을 적용합니다.
4. 이 방법은 class나 id 없이 스타일을 적용하는 방법으로, CSS를 내부적으로 관리할 수 있게 됩니다.

이렇게 하면 외부의 스타일과 충돌하지 않으면서도 내부 스타일을 적용할 수 있습니다.