Fejes Anikó

@hubudibu

@frontendmeetup

@KIBU

codepen.io/hubudibu

Shadow DOM

Templates

Custom Elements

HTML Imports

Shadow DOM

Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.

Shadow DOM

DOM encapsulation

Style boundaries

Separate form from function

var host = document.querySelector("#host");
var shadowRoot = host.createShadowRoot();
shadowRoot.innerHTML = "shadow!";

Style boundaries

Insertion points

Separate form from function

Event handling

events are retargeted to look like they've come from the host element rather than internal elements to the Shadow DOM.

Method of declaring a portion of reusable markup that is parsed but not rendered until cloned.

Templates

Shadow DOM

Templates

HTML Imports

Custom Elements

Method of defining and using new types of DOM elements in a document.

Custom Elements

var CustomElement = document.registerElement('custom-element');
document.body.appendChild(new CustomElement());

<custom-element></custom-element>

Lifecycle events

AttributeChanged event

Extending elements

progressive enhancement

var CustonButton = document.registerElement('custom-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

<button is="custom-button"></button>

Shadow DOM

Templates

Custom Elements

HTML Imports

Method of including and reusing HTML documents in other HTML documents.

HTML Imports

DRY principle

Portability

Deduping

<template>
  <style> 
   .sticker {
      font: 30px/1.5 Montserrat, sans-serif;
      border: 4px solid crimson;
      border-radius: 20px;
      width: 400px;
      text-align: center;
      overflow: hidden;
    }
    .label {
      background: crimson;
      margin: 0;
      padding: .5em;
      color: white;
      font-size: .8em;
    }
    .name {
      font-weight: bold;
    }
  </style>
  <div class="sticker">
    <p class="label">Hi, my name is</p>
    <p class="name">
      <content></content>
    </p>
  </div>
</template>

<script>
  
  var NameStickerProto = Object.create(HTMLElement.prototype);
  
  var importDoc = document.currentScript.ownerDocument;

  NameStickerProto.createdCallback = function() {
    
    var shadowRoot = this.createShadowRoot();
    var template = importDoc.querySelector("template");

    shadowRoot.appendChild(template.content);
  };

  var NameSticker = document.registerElement('name-sticker', {
    prototype: NameStickerProto
  });
  
</script>