Development of Custom Element using Vue.js #kyotojs

오늘 할 말

주의

개발물

Kamishibai Viewer

Custom Elements의 개발 방법

Custom Elements의 개발 방법

Custom Elements의 개발 방법

하고 싶은 말→Custom Elements는 프레임으로 만들 수 있어요.

Vue CLI v3 개발

대략적인 절차

환경 구축

$ vue create my-wc-project
$ yarn add @vue/web-component-wrapper

package.json 편집

{
  "name": "my-wc-project",
  "scripts": {
    "build": "VUE_CLI_CSS_SHADOW_MODE=true vue-cli-service build --target wc --name my-component ./src/wc.ts",
    "...": "..."
  },
  "...": "..."
}

Entrypoint 전용 제작

import Vue from 'vue'

// TS の定義はない
const { default: wrap } = require('@vue/web-component-wrapper')

// ?shadow を使って Shadow DOM での Scoped CSS を有効化するのでこう読む
const { default: MyComponent } = require('./MyComponent.vue?shadow')

window.customElements.define('my-component', wrap(Vue, MyComponent))

어셈블리의 스크래치

<template>
  <div>
    <p>
      <span>Hi, {{username}}</span>
    </p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    username: String
  }
})
</script>

<style scoped>
p span {
  padding-bottom: 8px;
  border-bottom: solid 2px #77CB5B;
}
</style>

구축

$ yarn build

완성

실제로 해보세요 (시간 있으면)

슬라이드만 보는 사람

……

그럼 이게 뭐가 즐거워요?

Custom Element의 기쁨(1)

Custom Element의 기쁨(2)

다른 소감

Thanks