HTML5 Conference 2013 で聞いた「Web をまともにしたいので Shadow DOM と Web Components をつくってます」(動画参照)。 この講義を見て、調べながら実際に ShadowDOM を使ってWebComponents をつくってみました。 講義中にて紹介のあった、Polymer を使って自作のエレメント x-helloworld を実装してみました。 Polymer のインストール Polymer は、WebComponents を簡単に使えるようにするフレームワークのような、ライブラリのような、コンポーネント集でもあるようなものと、講義中で紹介されています。 今回は最低限のライブラリのみ使用して、最低限のコンポーネントを作成しました。 次のコマンドでPolymerをインストールします。(bowerをインストールしていないと動きません) そうする
![Shadow DOM に触れてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/737af98d9907912bd4500cfc124a84728d65f530/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9U2hhZG93JTIwRE9NJTIwJUUzJTgxJUFCJUU4JUE3JUE2JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iZGNiMjI2MWI3ODExMzQ5MmNhN2M2NDViMjUwNGEwNA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9tazc5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMTM3MjMzOGE0MWM3NTdmMTFhNjQyYTgxNDg3OTdjNg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D22bfc172d1d0d651e2147fdb7eee9565)