Web Components のリアル/ Realistic Web Components

06c292fa0b9557777d3cb4663ceec40a?s=47 aggre
November 25, 2018

Web Components のリアル/ Realistic Web Components

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

06c292fa0b9557777d3cb4663ceec40a?s=128

aggre

November 25, 2018
Tweet

Transcript

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

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

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

    Components (10min) • Web Components (20min)
  4. Web Components

  5. Custom Elements Shadow DOM HTML Templates ES Modules

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

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

  8. IE

  9. IE • Windows 10 Edge • Windows 7 2020 1

    • Windows 8.1 ? Edge … App
  10. None
  11. Polyfills IE, Edge

  12. Polyfills IE, Edge Shadow DOM

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

  14. Web Components

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

    HTML Imports
  16. • Custom Elements • Shadow DOM • ES Modules

  17. • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports • Custom Elements • Shadow DOM • ES Modules
  18. None
  19. HTML

  20. HTML

  21. Custom Elements

  22. Custom Elements

  23. None
  24. Custom Elements Shadow DOM ES Modules

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

    DOM
  26. Custom Elements

  27. None
  28. None
  29. DOM createElement()

  30. DOM createElement()

  31. None
  32. None
  33. None
  34. destroy

  35. observedAttributes DOM

  36. observedAttributes DOM

  37. iframe adoptNode() ownerDocument

  38. iframe adoptNode() ownerDocument

  39. Shadow DOM

  40. DOM

  41. CSS

  42. Shadow DOM

  43. None
  44. Shadow DOM

  45. <slot>

  46. <slot> Shadow DOM slot slot

  47. None
  48. slot

  49. None
  50. Shadow DOM slot

  51. • Custom Elements • • Shadow DOM DOM • slot

    Shadow DOM
  52. Web Components

  53. • • • • SSR • more…

  54. Web Components

  55. None
  56. size=large

  57. Web Components

  58. e.g. <iron-autogrow-textarea>

  59. e.g. <pinch-zoom>

  60. Web Components xxx-dnd … <drag-and-drop>

  61. None
  62. Web Components

  63. e.g. React

  64. e.g. React Shadow DOM React render

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

    :
  66. SSR Shadow DOM slot Hydrate SSR

  67. HTML

  68. shadowRoot <slot> render shadowRoot

  69. shadowRoot <slot> render shadowRoot slot

  70. shadowRoot <slot> render shadowRoot Hydrate

  71. shadowRoot <slot> render shadowRoot SSR

  72. • Custom Elements • Shadow DOM, slot • •

  73. Web Components

  74. None
  75. Web Components

  76. • • lit-html • Web Components • lit-html Web Components

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

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

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

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

  81. ( )

  82. None
  83. • • innerHTML addEventListener DOM API •

  84. lit-html ( lit-html )

  85. None
  86. lit-html

  87. lit-html

  88. lit-html html, render directive 3 API

  89. lit-html Tagged Templates

  90. lit-html HTML

  91. lit-html HTML DOM DOM

  92. lit-html DOM

  93. lit-html textContent <p>

  94. @Event

  95. ?attribute

  96. .property DOM

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

  98. lit-html • lit-html • Intellisense • Web Components • …

    • lit-html • lit-element
  99. lit-element

  100. None
  101. None
  102. lit-html React.Component

  103. lit-element • TypeScript Native • lit-html • Web Components •

    @property({type: X}) • • lit-html .property
  104. lit-html

  105. None
  106. None
  107. lit-html

  108. None
  109. <header>

  110. <nav>

  111. <article>

  112. <footer>

  113. JSX lit-html

  114. RxJS

  115. fit-html Redux + lit-html

  116. Directive API

  117. Directive API 1

  118. Directive API 0 -1

  119. Directive API directive

  120. Directive API

  121. Directive API render

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

    • Vue/Angular HTML React
  123. appendix

  124. lit-html, hyperHTML, htm Tagged Templates

  125. lit-html

  126. hyperHTML

  127. hyperHTML bind() DOM

  128. hyperHTML wire()

  129. htm

  130. htm htm ( preact )

  131. htm JSX

  132. htm …

  133. lit-html hyperHTML htm • (HTML Template Instantiation) • PolymerLabs/template-instantiation •

    Directive API • ES5 • Node.js • Tagged Templates JSX • preact vhtml developit/ WebReflection/ Polymer/
  134. ( TypeScript Native lit-html )

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

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

    • Custom Elements • Shadow DOM DOM • slot Shadow DOM • • • lit-element Web Components • FP lit-html
  137. Thank you! @aggre_ @aggre aggre.io