Slides · Exemples de WebComponents

Jump to bottom

Olivier Lange edited this page Feb 19, 2019 · 1 revision

Google Maps

<google-maps lat="…" long="…">

Model Viewer

http://model-viewer.glitch.me
https://beta.observablehq.com/@olange/using-the-model-viewer-web-component

<!-- Definition of the ‹model-viewer› custom element -->
<script src="https://unpkg.com/@google/model-viewer@0.0.7/dist/model-viewer.js"></script>

<model-viewer
  src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948"
  alt="A 3D model of an astronaut"
  background-color="#70BCD1"
  controls
  auto-rotate>
</model-viewer>

Barebones

Faire une démo et créer l'élément dans la console, sur la base du slide suivant, pour démontrer que c'est dynamique.

<html>
  <head>
    <script>
      customElements.define( "<our-element>", class extends HTMLElement {
        …
      });
    </script>
  </head>
  <body>
    <our-element></our-element>
  </body>
</html>