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

VueではじめるWeb Components

VueではじめるWeb Components

7afd74181738991f61d6061562ff419d?s=128

hitsuji-haneta

September 06, 2019
Tweet

Transcript

  1. Vue Web components ではじめる

  2. 自己紹介 高橋翔太 hitsuji-haneta thinkShake製作所 代表 LasTrust株式会社 CTO h1tsuj1_haneta

  3. 突然ですが皆さん

  4. ってご存知ですか?? Web components

  5. ライブラリなしで HTMLコンポーネント をカスタムできる ブラウザでサポート

  6. Custom Elements Shadow DOM HTML Template

  7. 例 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
  8. 動かしてみると

  9. vueの勉強会 なんですけど?

  10. ૬ੑൈ܈ʂ

  11. メリット MyButton

  12. メリット MyButton どんなフレームワークでも 使えちゃう

  13. なぜ調べたか? BCライブラリ群 UI シンプルに使いたい…

  14. <template> <div id="app"> <my-button label="hello" message=“world"/> </div> </template> <script> import

    ‘./components/my-button’; export default { ... }; </script> <style> ... </style> hoge.vue
  15. ͪΐʔ؆୯

  16. $ 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
  17. Vue Web components で はじめてみませんか?

  18. ありがとうございました