Web Componentsで遊んだ

先日、Web Components Cafe by Polymer Japanへ行った。

Web Components Cafe by Polymer Japan - connpass

そのときに聞いたaggreさんの発表(現場の Web Components)のコードを書いてみた

my-app.js

class MyApp extends HTMLElement {
    connectedCallback() {
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `
            <style>
                h1 { color: blue; }
            </style>
            <main>
                <h1>Hello, world!</h1>
            </main>
        `
    }
}

window.customElements.define('my-app', MyApp)

index.html

<script async src="my-app.js"></script>
<my-app></my-app>

素直にでてなんか難しいイメージだったんですけどちょっと嬉しかった

また、ESMを使う例も

my-app1.js

export class MyApp extends HTMLElement {
    connectedCallback() {
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `
            <style>
                h1 { color: blue; }
            </style>
            <main>
                <h1>Hello, world!</h1>
            </main>
        `
    }
}

index.html

<script type=module>
        import { MyApp } from './my-app1.js'
        window.customElements.define('my-app', MyApp)
 </script>
<my-app></my-app>

スライドにはmy-app.mjsとあったんですけどうまく行かなかったですが、.jsなら表示できた。

chromeでExperimental Web Platform featuresを有効化する必要あると思ったんですけど、しなくても良くなってたんですね。
あと、Firefoxが対応しなかった(Custom Elements - Web Components | MDN)ので最初動かなくて辛かった

AngularもWeb Componentsに対応してるので遊んでみたいです!