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

広島フロントエンド勉強会 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
   

   View Slide

2. ͻΉΒ ͱ΋ͻ͜
   • フロントエンドは人手不足のときだけ
   • iOSも最近仕事でやってない
   • プログラミング チョットデキル
   

   View Slide

3. ̍ߦͰΘ͔ΔΧελϜΤϨϝϯτ
   

   View Slide

4. 独自タグが作れる
   

   View Slide

5. Hello, World
   

   View Slide

6. 簡単
   

   View Slide

7. 2ߦͰͭ͘ΔΧελϜΤϨϝϯτ
   

   View Slide

8. class MyTag extends HTMLElement {}
   customElements.define('my-tag', MyTag);
   

   View Slide

9. 簡単
   

   View Slide

10. 書かなくても動く
    

    View Slide

11. 書かなくても動く
    むしろ、書くと一部のブラウザで動かない
    

    View Slide

12. ؒҧͬͯͳ͘͸ͳ͍ೖ໳Ҋ
    

    View Slide

13. ウェブアプリケーションなら
    カスタム要素でマークアップ
    していいのでは?
    

    View Slide

14. 
    
    ࿈བྷா
    hoge@example.com
    
    
    ड৴ശ
    2016-01-02 hogehoge
    2016-01-03 hogehoge
    
    
    

    View Slide

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;
    }
    

    View Slide

16. /* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ
    class MyApp extends HTMLElement {}
    customElements.define('my-app', MyApp);
    */
    

    View Slide

17. View Slide

18. https://playcode.io/6719
    

    View Slide

19. 無意味なdivの代わりに
    

    View Slide

20. 無意味なdivの代わりに
    要するにBEMのBlockの代わりな感じ
    

    View Slide

21. ஌͓͖͍ͬͯͨ
    ΧελϜΤϨϝϯτͷ̏ͭ͜ͱ
    

    View Slide

22. 独自タグの名前には
    ハイフンを含む必要がある
    

    View Slide

23. 
    
    

    View Slide

24. IUUQTBGSBNFJP
    

    View Slide

25. 
    <
    
    
    
    
    
    

    View Slide

26. b-frameとかz-frame
    とったもの勝ちなのでは
    

    View Slide

27. カスタムエレメントを
    定義する前に利用できる
    

    View Slide

28. /* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ
    class MyApp extends HTMLElement {}
    customElements.define('my-app', MyApp);
    */ /* ఆٛલʹͳΔͷͰΤϥʔʹͳΒͳ͍ */
    

    View Slide

29. まだ標準化されてない
    

    View Slide

30. APIが変わるかもなので注意
    

    View Slide

31. v1 apiの対応ブラウザ
    • Safari 10.1 以降 (未リリース?)
    • Google Chrome 54 以降
    • Google for Android 55 以降
    • Opera 41 以降
    IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMDVTUPNFMFNFOUT
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. カスタムエレメント
    • 独自タグをつくれます
    • 必ず名前にハイフンを含みます
    • 定義してない独自タグをつかうと
    • 後で定義されるはずの要素
    • CSS当てるだけなら使える
    • 場所によっては使えなくはない
    

    View Slide

34. NEXT STEP
    

    View Slide

35. Shadow DOM
    Web Component
    

    View Slide