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

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

1a679952cdf455ecd6a15cbde7ae80d5?s=128

Tomohiko Himura

March 03, 2017
Tweet

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); */

  17. None
  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