Web ComponentAan de slag met Web Component


Opmerkingen

Deze sectie biedt een overzicht van wat Web Components zijn en waarom een ontwikkelaar ze misschien wil gebruiken.

Webcomponenten zijn een reeks nieuwe webtechnologieën die zijn geïmplementeerd in moderne webbrowsers en worden gebruikt om herbruikbare webelementen te ontwerpen met de enige hulp van HTML, JavaScript en CSS.

Onderwerpen die vallen onder de term Webcompoments zijn:

  • Aangepaste elementen

  • HTML-sjablonen

  • Schaduw DOM

  • HTML-invoer

Deze technologieën zijn complementair en kunnen samen of afzonderlijk worden gebruikt.

versies

Components Specificatie Laatste uitgave
HTML-sjablonen W3C HTML5-aanbeveling 2014/10/28
Aangepaste elementen W3C Working Drafts of WHATWG HTML en DOM Living Standard 2016/10/13
Schaduw DOM W3C Working Drafts of WHATWG HTML en DOM Living Standard 2017/01/16
HTML-invoer W3C Working Drafts 2016/02/25

Beschikbaarheid

Native implementaties

Het element <template> is geïmplementeerd in elke moderne browser:

  • Chrome,
  • Rand,
  • Firefox,
  • Opera,
  • Safari,
  • ...

Aangepaste elementen customElements.define() , Shadow DOM attachShadow() en HTML-import <link rel="import"> zijn geïmplementeerd in de nieuwste versies van Chrome en Opera.

polyfills

Voor andere browsers kunt u een polyfill-bibliotheek gebruiken:

Aangepast element - Hallo wereld

Maak een nieuwe HTML-tag met de naam <hello-world> met de tekst "Hallo wereld!":

<script>
//define a class extending HTMLElement
class HelloWorld extends HTMLElement {
    connectedCallback () {
      this.innerHTML = 'Hello, World!'
    }
}

//register the new custom element
customElements.define( 'hello-world', HelloWorld )
</script>

<!-- make use the custom element -->
<hello-world></hello-world>
 

Hallo wereld voorbeeld

Dit voorbeeld combineert Custom Element, Template, Shadow DOM en HTML Import om de "Hello, World!" string in HTML.

In bestand hello-world.html :

<!-- 1. Define the template -->
<template>
   Hello, World!
</template>

<script>
  var template = document.currentScript.ownerDocument.querySelector( 'template' )   

  //2. Define the custom element
  
  customElements.define( 'hello-world', class extends HTMLElement 
  {
      constructor() 
      {
          //3. Create a Shadow DOM
          var sh = this.attachShadow( { mode: 'open' } )
          sh.appendChild( document.importNode( template.content, true ) )
     }
  } )
</script>
 

In hoofdbestand index.html :

<html>
<head>
    <!-- 4. Import the HTML component --> 
    <link rel="import" href="hello-world.html">
</head>
<body>
    <hello-world></hello-world>      
</body>
</html>
 

HTML-import - Hallo wereld

Importeer een HTML-bestand dat een div toevoegt met "Hallo wereld!" aan het einde van de DOM-structuur van het hoofddocument.

Geïmporteerd bestand hello.html :

<script>
   var div = document.createElement( 'div' )
   div.innerHTML = 'Hello, World!'
   document.body.appendChild( div )
</script>
 

Hoofdbestand index.html :

<html>
  <link rel="import" href="hello.html">
 

HTML-sjabloon - Hallo wereld

Gebruik een <template> -element om een HTML-sjabloon te ontwerpen die u vervolgens opnieuw kunt gebruiken in uw code.

<template id="Template1">
    Hello, World !
<template>

<div id="Target1"></div>

<script>
   Target1.appendChild( Template1.content.cloneNode( true ) )
</script>
 

Hiermee wordt de inhoud van de sjabloon #Target1 in de #Target1 div.

Shadow DOM - Hallo wereld

Voeg een Shadow DOM toe aan een div die "Hallo wereld!" in plaats van de oorspronkelijke inhoud.

<div id="Div1">intial content</div>

<script>
   var shadow = Div1.attachShadow( { mode: 'open' } )
   shadow.innerHTML = "Hello, World!" 
</script>