[javascript] Polymer에서의 CSS 스타일링 방법

30 Nov 2023

javascript

Polymer는 웹 컴포넌트를 개발하기 위한 프레임워크로서, CSS 스타일링을 쉽게 적용하고 관리할 수 있는 기능을 제공합니다. 이번 글에서는 Polymer에서 사용할 수 있는 CSS 스타일링 방법에 대해 알아보겠습니다.

Shadow DOM 사용하기

Polymer의 핵심 기능 중 하나인 Shadow DOM은 컴포넌트의 스타일을 캡슐화하고 격리시킬 수 있는 기술입니다. Shadow DOM을 사용하면 컴포넌트 내부의 스타일이 외부에서의 영향을 받지 않고 독립적으로 적용됩니다.

<dom-module id="my-component">
  <template>
    <style>
      :host {
        /* 스타일을 적용할 컴포넌트의 루트 요소입니다 */
      }
      
      /* 자식 요소의 스타일을 지정할 수도 있습니다 */
      ::slotted(.child-element) {
        /* 스타일 설정 */
      }
    </style>
    <!-- 컴포넌트의 내용 -->
  </template>
  <script>
    class MyComponent extends Polymer.Element {
      static get is() { return 'my-component'; }
    }
    customElements.define(MyComponent.is, MyComponent);
  </script>
</dom-module>

위 예제에서 :host 선택자는 컴포넌트의 루트 요소를 지정합니다. ::slotted 선택자는 컴포넌트에 슬롯이 있는 경우 슬롯으로 삽입된 자식 요소에 스타일을 적용할 수 있습니다.

Mixin 사용하기

Mixin은 Polymer에서 스타일을 공유하기 위한 방법 중 하나입니다. Mixin을 사용하면 여러 컴포넌트에 동일한 스타일을 적용할 수 있으며, 중복된 코드를 줄일 수 있습니다.

<dom-module id="shared-styles">
  <template>
    <style>
      /* 스타일을 공유할 컴포넌트들에 적용할 스타일 선언 */
    </style>
  </template>
</dom-module>

<dom-module id="my-component">
  <template>
    <style include="shared-styles"></style>
    <!-- 컴포넌트의 내용 -->
  </template>
  <script>
    class MyComponent extends Polymer.Element {
      static get is() { return 'my-component'; }
    }
    customElements.define(MyComponent.is, MyComponent);
  </script>
</dom-module>

위 예제에서 include 속성은 Mixin으로 선언된 스타일을 현재 컴포넌트에 포함시킵니다. 이렇게 하면 shared-styles 모듈에서 정의한 스타일이 my-component 컴포넌트에 적용됩니다.

CSS 변수 사용하기

CSS 변수를 사용하면 동일한 값들을 여러 위치에 쉽게 적용할 수 있습니다. Polymer에서는 custom-css-properties 모듈을 사용하여 CSS 변수를 정의하고 사용할 수 있습니다.

<dom-module id="my-component">
  <template>
    <style include="custom-css-properties">
      /* CSS 변수 선언 */
      :host {
        --primary-color: blue;
      }
      /* CSS 변수 사용 */
      .my-element {
        color: var(--primary-color);
      }
    </style>
    <!-- 컴포넌트의 내용 -->
    <div class="my-element">Hello, Polymer!</div>
  </template>
  <script>
    class MyComponent extends Polymer.Element {
      static get is() { return 'my-component'; }
    }
    customElements.define(MyComponent.is, MyComponent);
  </script>
</dom-module>

위 예제에서 --primary-color라는 이름의 CSS 변수를 정의하고, var() 함수를 사용하여 스타일 규칙에 변수를 적용합니다.

Polymer에서는 이외에도 CSS Shadow Parts, Custom CSS Mixins 등의 고급 스타일링 기능을 제공합니다. 자세한 내용은 공식 문서를 참고해주세요.

Shadow DOM 사용하기

Mixin 사용하기

CSS 변수 사용하기

참고 자료