Primeros pasos con el componente web

Disponibilidad

Implementaciones nativas

El elemento <plantilla> está implementado en todos los navegadores modernos:

  • Cromo,
  • Borde, -Firefox,
  • Ópera,
  • safari,
  • …

Los elementos personalizados customElements.define(), Shadow DOM attachShadow() y HTML Imports <link rel="import"> se implementan en las últimas versiones de Chrome y Opera.

Polyfills

Para otros navegadores, puede usar una biblioteca de polyfill:

Plantilla HTML - Hola mundo

Use un elemento <plantilla> para diseñar una plantilla HTML que luego puede reutilizar en su código.

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

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

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

Esto insertará el contenido de la plantilla en el div #Target1.

Elemento personalizado - Hola mundo

Cree una nueva etiqueta HTML llamada <hello-world> que mostrará “¡Hola, mundo!”:

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

Shadow DOM - Hola mundo

Agregue un Shadow DOM a un div que mostrará “¡Hola, mundo!” en lugar de su contenido inicial.

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

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

Importación de HTML - Hola mundo

Importe un archivo HTML que agregará un div con “¡Hola, mundo!” al final del árbol DOM del documento principal.

Archivo importado hola.html:

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

Archivo principal index.html:

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

Ejemplo de Hola Mundo

Este ejemplo combina elemento personalizado, plantilla, Shadow DOM e importación de HTML para mostrar un “¡Hola, mundo!” cadena en HTML.

En el archivo hola-mundo.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>

En el archivo principal index.html:

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