Bower + WebComponents

WebComponentsのパッケージ化について。。。

Transcript

1. Bower + WebComponents @ichikawa Tsukiji.front - 2014/10/24
2. パッケージ管理ツール
3. • Component - https://github.com/componentjs/component • Bower - http://bower.io/ • RequireJS - http://requirejs.org/ • Browserify - http://browserify.org/
4. • Component - https://github.com/componentjs/component • Bower - http://bower.io/ • RequireJS - http://requirejs.org/ • Browserify - http://browserify.org/
5. 普段使ってるBowerで！
6. とりあえずColorPickerを作る
7. ソースをコンポーネント化
8. ソースをコンポーネント化
9. まずは、 シンプルなテンプレコード で実行
10. createdCallback: { value: function(){ var shadowRoot = this.createShadowRoot(); var template = document.querySelector('#nameOfTemplate'); shadowRoot.appendChild(template.content.cloneNode(true)); } }
11. templateが読めない。。。
12. //global var currentDocument = document.currentScript.ownerDocument; ... createdCallback: { value: function(){ var shadowRoot = this.createShadowRoot(); var template = currentDocument.querySelector('#nameOfTemplate'); shadowRoot.appendChild(template.content.cloneNode(true)); } }
13. 読めるようになった！
14. 作成コードをはめ込む
15. • テンプレートがShadowRoot内に入るのでセレクタ注意 • 画像などのアセットパスの扱いをどうするか、今回は埋め込んだ
16. githubにpush
17. bowerに登録 bower register [パッケージ名] [パッケージリポジトリパス ]
18. 別プロジェクトで利用 DEMO
19. ホントは配置までやりたかった 次の機会に。。。
20. おわり