dzenzes

if ("import" in document.createElement("link")) {
  // magic...
}

dzenzes

if ("import" in document.createElement("link")) {
  const link = document.querySelector('link[rel="import"]'); // (1)
  const content = link.import;
  const element = content.querySelector("#webcomponents"); // (2)
  document.body.appendChild(element.cloneNode(true)); // (3)
}

dzenzes

if (document.head.createShadowRoot || document.head.attachShadow) {
  // magic happens here
}

dzenzes

<div id=”webcomponents”></div>
<p>normal paragraph</p>

dzenzes

if (document.head.createShadowRoot || document.head.attachShadow) {
  const shadow = document.querySelector("#webcomponents").attachShadow({
    // (1)
    mode: "open"(2)
  });

  shadow.innerHTML = "<p>HTML Template</p>"; // (2)
  shadow.innerHTML += "<p>HTML Import</p>";
  shadow.innerHTML += "<p>Shadow DOM</p>";
  shadow.innerHTML += "<p>Custom Elements</p>";

dzenzes

<web-components></web-components>

dzenzes

if ("customElements" in window) {
  // magic happens here
}

dzenzes

if ("customElements" in window) {
  class WebComponents extends HTMLElement {
    // (1)
    constructor() {
      super();
      this.innerHTML =
        //(2)
        `<ul>
            <li>HTML Template</li>
            <li>HTML Import</li>

dzenzes

let tmpl = document.createElement("template"); // (1)
tmpl.innerHTML = `
 <ul id="webcomponents"> 
   <li>HTML Template</li>
   <li>HTML Import</li>
   <li>Shadow DOM</li>
   <li>Custom Elements</li>
 </ul>`;

class WebComponents extends HTMLElement {

dzenzes

Keybase proof

I hereby claim:

• I am dmies on github.
• I am danielmies (https://keybase.io/danielmies) on keybase.
• I have a public key ASAXEdMDE25Lq120iWi2LaApLLeC_BfJCU0-tIzcm0PsJwo

To claim this, I am signing this object: