simple-shadow-dom

simple-shadow-dom(ssd)

What is ssd?

web api에 이미 구현되어 있는 shadow dom에 추가적인 메소드를 제공해서 보다 간편하게 shadow dom을 사용할수 있는 모듈입니다.

Install

npm i simple-shadow-dom

Basic usage

import simpleShadowDom from 'simple-shadow-dom'

class Component extends simpleShadowDom {
  constructor() {
    super()

    ...
  }
}

Methods

✅ simple-shadow-dom은 기본 web-api를 확장했기 때문에 기존 메소드를 모두 활용할수 있습니다. https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM

static render

Type: (rootElement, ssdClass, initTagName) => void

  import simpleShadowDom from 'simple-shadow-dom'

  class Component extends simpleShadowDom {
      ...
  }

  const root = document.getElementById('root')

  simpleShadowDom.render(root, Component, 'shadow-component')

static setEachStyle

Type: (cssTemplate) => void

  const cssTemplate = `
    div {
      background: red;

      h1 {
        color: blue;
      }
    }
  `

  simpleShadowDom.setEachStyle(cssTemplate)

• 🔸 ssd로 생성한 모든 shadow tree에 작성한 css가 적용됩니다.
• 🔸 nested css가 지원됩니다.
• 🔺 global css와는 다르게 각각 컴포넌트에 css가 추가됩니다.

setTemplate

Type: (htmlTemplate) => void

  import simpleShadowDom from 'simple-shadow-dom'

  const template = `
    <div>
      <h1>Hello World!</h1>
    </div>
  `

  class Component extends simpleShadowDom {
    constructor() {
      super()

      this.setTemplate(template)
      ...
    }
  }

• 🔸 현재 컴포넌트에 template을 저장합니다.
• 🔸 아래와 같이 변수를 받아 사용할수도 있습니다. 변수를 사용하는 방법은 setState 참조

  const template = (state) => `
    <div>
      <h1>${state}</h1>
    </div>
  `

setStyle

Type: (cssTemplate) => void

  import simpleShadowDom from 'simple-shadow-dom'

  const cssTemplate = `
    div {
      background: red;

      h1 {
        color: blue;
      }
    }
  `

  class Component extends simpleShadowDom {
    constructor() {
      super()

      this.setStyle(cssTemplate)
      ...
    }
  }

• 🔸 현재 shadow tree에 작성한 css가 적용됩니다.
• 🔸 nested css가 지원됩니다.

setState

Type: (props) => void

  import simpleShadowDom from 'simple-shadow-dom'

  const props = { text: 'text' }

  class Component extends simpleShadowDom {
    constructor() {
      super()

      this.setState(props)
      ...
    }
  }

• 🔸 render메소드가 실행될때 props를 만들어뒀던 template에 주입합니다.
• 🔸 default props는 null입니다.

render

Type: () => void

  import simpleShadowDom from 'simple-shadow-dom'

  class Component extends simpleShadowDom {
    constructor() {
      super()

      ...
      this.render()
    }
  }

• 🔸 저장해놨던 template과 css, props를 이용해서 실제 돔에 rendering합니다.

Dependencies

css-flatten

• https://github.com/fabiospampinato/css-flatten