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. 3.

    • Web Components (5min) • Web Components (5min) • Web

    Components (10min) • Web Components (20min)
  2. 8.

    IE

  3. 9.

    IE • Windows 10 Edge • Windows 7 2020 1

    • Windows 8.1 ? Edge … App
  4. 10.
  5. 17.

    • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports • Custom Elements • Shadow DOM • ES Modules
  6. 18.
  7. 19.
  8. 20.
  9. 23.
  10. 27.
  11. 28.
  12. 31.
  13. 32.
  14. 33.
  15. 34.
  16. 40.

    DOM

  17. 41.

    CSS

  18. 43.
  19. 45.
  20. 47.
  21. 48.
  22. 49.
  23. 55.
  24. 61.
  25. 67.
  26. 74.

  27. 75.
  28. 82.

    ( )

  29. 83.
  30. 86.
  31. 87.
  32. 88.
  33. 95.
  34. 101.
  35. 102.
  36. 104.

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

    @property({type: X}) • • lit-html .property
  37. 105.
  38. 106.
  39. 107.
  40. 108.
  41. 109.
  42. 110.
  43. 111.
  44. 112.
  45. 113.
  46. 115.
  47. 124.
  48. 126.
  49. 127.
  50. 130.

    htm

  51. 132.
  52. 133.
  53. 134.

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

    Directive API • ES5 • Node.js • Tagged Templates JSX • preact vhtml developit/ WebReflection/ Polymer/
  54. 137.

    • / Polyfills OK • Edge , IE 2020 Polyfills

    • Custom Elements • Shadow DOM DOM • slot Shadow DOM • • • lit-element Web Components • FP lit-html