svelte에서 웹컴포넌트로 만들기

zori (html programmer)·2023년 3월 11일
0
  1. svelte 설치
npm init vite
... 이후 스벨트 설치
  1. main.js 변경
import App from './App.svelte'

class WCApp extends HTMLElement {
  constructor() {
    super()

    new App({
      target: this.attachShadow({ mode: 'open' })
    });
  }
}

customElements.define('wc-app', WCApp)
  1. html 변경
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Svelte App</title>
  </head>

  <body>
    <wc-app></wc-app>
    
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

style 을 shadow dom 에 넣는 방법은 찾지 못했다..
-> 뭔가 접근을 잘못한듯.. https://svelte.dev/docs#run-time-custom-element-api 쓰면 될까?

profile
HTML개발자 입니다.

0개의 댓글