<ハ-ドル低めカスタムエレメントの始め方 />

広島フロントエンド勉強会 Vol. 7の発表資料です。
http://hiroshima.codecodeweb.com/
https://hfe.connpass.com/event/50535/

解説
http://blog.eiel.info/blog/2017/03/06/frontend-vol7/

登場したソースコード
https://playcode.io/6719

参考文献
* https://webkit.org/blog/7027/introducing-custom-elements/

* PolyFill [WebReflection/document-register-element](https://github.com/WebReflection/document-register-element)
* [whatwg Custom Elements](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements)
* [Custom Elements | MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements)
* [Custom Element | HTML5Rocks](https://www.html5rocks.com/ja/tutorials/webcomponents/customelements/)

Transcript

1. <ϋ-υϧ௿ΊΧελϜΤϨϝϯτͷ࢝Ίํ /> 2017-03-03 ޿ౡϑϩϯτΤϯυษڧձ Vol.7
2. ͻΉΒ ͱ΋ͻ͜ • フロントエンドは人手不足のときだけ • iOSも最近仕事でやってない • プログラミング チョットデキル
3. ̍ߦͰΘ͔ΔΧελϜΤϨϝϯτ
4. 独自タグが作れる
5. <my-tag>Hello, World</my-tag>
6. 簡単
7. 2ߦͰͭ͘ΔΧελϜΤϨϝϯτ
8. class MyTag extends HTMLElement {} customElements.define('my-tag', MyTag);
9. 簡単
10. 書かなくても動く
11. 書かなくても動く むしろ、書くと一部のブラウザで動かない
12. ؒҧͬͯͳ͘͸ͳ͍ೖ໳Ҋ
13. ウェブアプリケーションなら カスタム要素でマークアップ していいのでは?
14. <my-app> <my-contact> <my-header>࿈བྷா</my-header> <my-user>hoge@example.com</my-user> </my-contact> <my-inbox> <my-header>ड৴ശ</my-header> <my-mail>2016-01-02 hogehoge</my-mail> <my-mail>2016-01-03 hogehoge</my-mail> </my-inbox> </my-app>
15. my-app { display: block; background-color: #eee; width: 300px; } my-contact { display: block; margin: 10px 10px 0 10px; background-color: white; } my-contact > my-user { padding: 4px; font-size: 10px; } my-contact > my-header { font-size: 10px; }
16. /* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ class MyApp extends HTMLElement {} customElements.define('my-app', MyApp); */
18. https://playcode.io/6719
19. 無意味なdivの代わりに
20. 無意味なdivの代わりに 要するにBEMのBlockの代わりな感じ
21. ஌͓͖͍ͬͯͨ ΧελϜΤϨϝϯτͷ̏ͭ͜ͱ
22. 独自タグの名前には ハイフンを含む必要がある
23. <my-tag></my-tag> <!— OK —> <mytag></mytag> <!— NG —>
24. IUUQTBGSBNFJP
    
25. <a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-s <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="# <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4">< <a-sky color="#ECECEC"></a-sky> <a-entity position="0 0 3.8"> <a-camera></a-camera> </a-entity> </a-scene>
26. b-frameとかz-frame とったもの勝ちなのでは
27. カスタムエレメントを 定義する前に利用できる
28. /* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ class MyApp extends HTMLElement {} customElements.define('my-app', MyApp); */ /* ఆٛલʹͳΔͷͰΤϥʔʹͳΒͳ͍ */
29. まだ標準化されてない
30. APIが変わるかもなので注意
31. v1 apiの対応ブラウザ • Safari 10.1 以降 (未リリース?) • Google Chrome 54 以降 • Google for Android 55 以降 • Opera 41 以降 IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMDVTUPNFMFNFOUT
    
32. ·ͱΊ
33. カスタムエレメント • 独自タグをつくれます • 必ず名前にハイフンを含みます • 定義してない独自タグをつかうと • 後で定義されるはずの要素 • CSS当てるだけなら使える • 場所によっては使えなくはない
34. NEXT STEP
35. Shadow DOM Web Component