🥇 elementos HTML personalizados Shadow DOM

Os elementos personalizados permitem que os desenvolvedores da web definam novos tipos de elementos HTML com funcionalidade personalizada.

Definindo novos elementos DOM

Registre um novo elemento html com document.registerElement

var myApp = {};    
myApp.XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

defina seu elemento na marcação como faria com outro elemento html

<x-foo></x-foo>

Estenda de outros elementos

herdar de um elemento de botão

myApp.XButton = document.registerElement('x-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

marcação para novo elemento do botão x

<button is="x-button">

herdar do elemento x foo

// inherit from xFoo
myApp.XFooExtended = document.registerElement('x-foo-extended', {
  prototype: myApp.XFoo,
  extends: 'x-foo'
});

Adicione propriedades e métodos para fornecer funcionalidade para um elemento

adicione métodos e propriedades ao seu elemento x-foo personalizado

// method
myApp.XFooProto.hello = function() {
  console.log('hello() called');
};

// writable property
Object.defineProperty(XFooProto, 'bar', { 
    value: 20,
    writable : true
});

Criando elementos do Shadow DOM com um modelo

crie um modelo para definir a marcação para seu novo elemento

<template id="foo-template">
  <p>I'm in Shadow DOM...</p>
</template>

adicione o elemento ao ShadowDOM do elemento assim que o elemento for criado

myApp.XFooProto = Object.create(HTMLElement.prototype);

// element created callback
XFooProto.createdCallback = function() {
  var shadow = this.createShadowRoot();
  var template = document.querySelector('#foo-template');
  var cloneTemplate = document.importNode(template.content, true);
  this.createShadowRoot().appendChild(cloneTemplate);
};

myApp.XFoo = document.registerElement('x-foo-shadow', {prototype: XFooProto});