Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueではじめるWeb Components

VueではじめるWeb Components

hitsuji-haneta

September 06, 2019
Tweet

More Decks by hitsuji-haneta

Other Decks in Programming

Transcript

  1. 例 const template = document.createElement('template'); template.innerHTML = ` <style>…</style> <div>…</div>

    `; class Button extends HTMLElement { constructor() { … this.$button .addEventListener('click', () => { console.log(this.message); }); } … } window .customElements .define(‘my-button', Button); my-button.js <script type=“module" src=“./my-button.js”> </script> <div> <h1>hello</h1> <my-button label=“hello” message=“world"> </my-button> </div> hoge.html
  2. <template> <div id="app"> <my-button label="hello" message=“world"/> </div> </template> <script> import

    ‘./components/my-button’; export default { ... }; </script> <style> ... </style> hoge.vue
  3. $ vue-cli-service build --target wc —-name my- button ./MyButton.vue <script

    src=“https://unpkg.com/vue"></script> <script type=“module src=“./dist/my-button.js”> </script> <div> <h1>hello</h1> <my-button label=“hello” message=“world"> </my-button> </div> hoge.html