Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components のリアル/ Realistic Web Components

aggre
November 25, 2018

Web Components のリアル/ Realistic Web Components

HTML5 Conference 2018 ( https://events.html5j.org/conference/2018/11/ )での資料です

aggre

November 25, 2018
Tweet

More Decks by aggre

Other Decks in Technology

Transcript

  1. Web Components
    HTML5 Conference 2018 @2018-11-25

    View Slide

  2. aggre
    @aggre_
    @aggre
    FRAME00, INC. CTO
    aggre.io

    View Slide

  3. • Web Components (5min)
    • Web Components (5min)
    • Web Components (10min)
    • Web Components (20min)

    View Slide

  4. Web Components

    View Slide

  5. Custom Elements
    Shadow DOM
    HTML Templates
    ES Modules

    View Slide

  6. Custom Elements
    Shadow DOM
    HTML Templates
    ES Modules
    /
    Production-ready

    View Slide

  7. Custom Elements
    Shadow DOM
    HTML Templates
    ES Modules
    Edge
    Developing ‼

    View Slide

  8. IE

    View Slide

  9. IE
    • Windows 10 Edge
    • Windows 7 2020 1
    • Windows 8.1 ?
    Edge …
    App

    View Slide

  10. View Slide

  11. Polyfills
    IE, Edge

    View Slide

  12. Polyfills
    IE, Edge
    Shadow DOM

    View Slide

  13. • / Polyfills OK
    • Edge , IE 2020 Polyfills

    View Slide

  14. Web Components

    View Slide

  15. • Custom Elements
    • Shadow DOM
    • HTML Templates
    • HTML Imports

    View Slide

  16. • Custom Elements
    • Shadow DOM
    • ES Modules

    View Slide

  17. • Custom Elements
    • Shadow DOM
    • HTML Templates
    • HTML Imports
    • Custom Elements
    • Shadow DOM
    • ES Modules

    View Slide

  18. View Slide

  19. HTML

    View Slide

  20. HTML

    View Slide

  21. Custom Elements

    View Slide

  22. Custom Elements

    View Slide

  23. View Slide

  24. Custom Elements
    Shadow DOM
    ES Modules

    View Slide

  25. Custom Elements
    Shadow DOM
    ES Modules
    Custom Elements
    Shadow DOM
    DOM

    View Slide

  26. Custom Elements

    View Slide

  27. View Slide

  28. View Slide

  29. DOM
    createElement()

    View Slide

  30. DOM
    createElement()

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. destroy

    View Slide

  35. observedAttributes
    DOM

    View Slide

  36. observedAttributes
    DOM

    View Slide

  37. iframe adoptNode()
    ownerDocument

    View Slide

  38. iframe adoptNode()
    ownerDocument

    View Slide

  39. Shadow DOM

    View Slide

  40. DOM

    View Slide

  41. CSS

    View Slide

  42. Shadow DOM

    View Slide

  43. View Slide

  44. Shadow DOM

    View Slide


  45. View Slide


  46. Shadow DOM slot
    slot

    View Slide

  47. View Slide

  48. slot

    View Slide

  49. View Slide

  50. Shadow DOM slot

    View Slide

  51. • Custom Elements

    • Shadow DOM DOM
    • slot Shadow DOM

    View Slide

  52. Web Components

    View Slide




  53. • SSR
    • more…

    View Slide

  54. Web Components

    View Slide

  55. View Slide

  56. size=large

    View Slide

  57. Web Components

    View Slide

  58. e.g.

    View Slide

  59. e.g.

    View Slide

  60. Web Components
    xxx-dnd


    View Slide

  61. View Slide

  62. Web Components

    View Slide

  63. e.g. React

    View Slide

  64. e.g. React
    Shadow DOM
    React render

    View Slide

  65. • Web Components
    • React, Angular, Vue…


    • :

    View Slide

  66. SSR
    Shadow DOM slot
    Hydrate SSR

    View Slide

  67. HTML

    View Slide

  68. shadowRoot
    render
    shadowRoot

    View Slide

  69. shadowRoot
    render
    shadowRoot
    slot

    View Slide

  70. shadowRoot
    render
    shadowRoot
    Hydrate

    View Slide

  71. shadowRoot
    render
    shadowRoot
    SSR

    View Slide

  72. • Custom Elements
    • Shadow DOM, slot


    View Slide

  73. Web Components

    View Slide


  74. View Slide

  75. View Slide

  76. Web Components

    View Slide


  77. • lit-html
    • Web Components
    • lit-html Web Components
    • lit-element
    • Angular/Vue

    View Slide

  78. • lit-html
    • lit-html Web Components
    • lit-element
    • Angular/Vue

    View Slide

  79. • lit-html
    • lit-html Web Components
    • lit-element
    • Angular/Vue
    Web Components

    View Slide

  80. • lit-html
    • lit-html Web Components
    • lit-element
    • Angular/Vue
    FW
    FW Web Components

    View Slide

  81. • lit-html
    • lit-html Web Components
    • lit-element
    • Angular/Vue

    View Slide

  82. ( )

    View Slide

  83. View Slide


  84. • innerHTML addEventListener DOM API

    View Slide

  85. lit-html
    ( lit-html )

    View Slide

  86. View Slide

  87. lit-html

    View Slide

  88. lit-html

    View Slide

  89. lit-html
    html, render directive
    3 API

    View Slide

  90. lit-html
    Tagged Templates

    View Slide

  91. lit-html
    HTML

    View Slide

  92. lit-html
    HTML
    DOM
    DOM

    View Slide

  93. lit-html
    DOM

    View Slide

  94. lit-html
    textContent

    View Slide

  95. @Event

    View Slide

  96. ?attribute

    View Slide

  97. .property
    DOM

    View Slide

  98. Intellisense for lit-html
    typescript-lit-html-plugin, vscode-lit-html

    View Slide

  99. lit-html
    • lit-html
    • Intellisense
    • Web Components
    • …
    • lit-html
    • lit-element

    View Slide

  100. lit-element

    View Slide

  101. View Slide

  102. View Slide

  103. lit-html
    React.Component

    View Slide

  104. lit-element
    • TypeScript Native
    • lit-html
    • Web Components
    • @property({type: X})

    • lit-html .property

    View Slide

  105. lit-html

    View Slide

  106. View Slide

  107. View Slide

  108. lit-html

    View Slide

  109. View Slide


  110. View Slide


  111. View Slide


  112. View Slide


  113. View Slide

  114. JSX
    lit-html

    View Slide

  115. RxJS

    View Slide

  116. fit-html
    Redux + lit-html

    View Slide

  117. Directive API

    View Slide

  118. Directive API
    1

    View Slide

  119. Directive API
    0 -1

    View Slide

  120. Directive API
    directive

    View Slide

  121. Directive API

    View Slide

  122. Directive API
    render

    View Slide

  123. lit-html
    • TypeScript Native
    • JSX
    • Directive API

    • Vue/Angular HTML
    React

    View Slide

  124. appendix

    View Slide

  125. lit-html, hyperHTML, htm
    Tagged Templates

    View Slide

  126. lit-html

    View Slide

  127. hyperHTML

    View Slide

  128. hyperHTML
    bind() DOM

    View Slide

  129. hyperHTML
    wire()

    View Slide

  130. htm

    View Slide

  131. htm
    htm
    ( preact )

    View Slide

  132. htm
    JSX

    View Slide

  133. htm

    View Slide

  134. lit-html
    hyperHTML
    htm
    • (HTML Template Instantiation)
    • PolymerLabs/template-instantiation
    • Directive API
    • ES5
    • Node.js
    • Tagged Templates JSX
    • preact vhtml
    developit/
    WebReflection/
    Polymer/

    View Slide

  135. ( TypeScript Native lit-html )

    View Slide

  136. • lit-element Web Components
    • FP lit-html ( )

    View Slide

  137. • / Polyfills OK
    • Edge , IE 2020 Polyfills
    • Custom Elements
    • Shadow DOM DOM
    • slot Shadow DOM


    • lit-element Web Components
    • FP lit-html

    View Slide

  138. Thank you!
    @aggre_
    @aggre
    aggre.io

    View Slide