dzenzes

#!/bin/env zsh

PS1_EMOJIS=("😀" "😃" "😄" "😁" "😆" "😅" "🤣" "😂" "🙂" "🙃" "😉" "😊" "😇" "😍" "😘" "😗" "😚" "😙" "😋" "😛" "😜" "😝" "🤑" "🤗" "🤔" "🤐" "😐" "😑" "😶" "😏" "😒" "🙄" "😬" "🤥" "😌" "😔" "😪" "🤤" "😴" "😷" "🤒" "🤕" "🤢" "🤧" "😵" "🤠" "😎" "🤓" "😕" "😟" "🙁" "😮" "😯" "😲" "😳" "😦" "😧" "😨" "😰" "😥" "😢" "😭" "😱" "😖" "😣" "😞" "😓" "😩" "😫" "😤" "😡" "😠" "😈" "👿" "💀" "💩" "🤡" "👹" "👺" "👻" "👽" "🤖" "😺" "😸" "😹" "😻" "😼" "😽" "🙀" "😿" "😾" "🙈" "🙉" "🙊" "💋" "💌" "💘" "💝" "💖" "💗" "💓" "💞" "💕" "💟" "💔" "💛" "💚" "💙" "💜" "💥" "💫" "💦" "💨" "💬" "💭" "💤" "👋" "🤚" "✋" "🖖" "👌" "🤞" "🤘" "🤙" "👈" "👉" "👆" "🖕" "👇" "👍" "👎" "✊" "👊" "🤛" "🤜" "👏" "🙌" "👐" "🤝" "🙏" "💅" "🤳" "💪" "👂" "👀" "👅" "👄" "👶" "👦" "👧" "👱" "👨" "👱" "👨" "👨" "👨" "👨" "👩" "👱" "👩" "👩" "👩" "👩" "👴" "👵" "🙇" "🙇" "🤦" "🤦" "🤦" "🤷" "🤷" "🤷" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👨" "👩" "👩" "🏃" "🏃" "💃" "🕺" "👯" "👯" "👯" "🤺" "🏇" "🚣" "🚣" "🚣" "🏊" "🏊" "🏊" "🚴" "🚴" "🚴" "🚵" "🚵" "🚵" "🤸" "🤸" "🤸" "🤼" "🤼" "🤼" "🤽" "🤽" "🤽" "🤾" "🤾" "🤾" "🤹" "🤹" "🤹" "🛀" "🛌" "👫" "👬" "💏" "👩" "👨" "👩" "💑" "👩" "👨" "👩" "👪" "👨" "👨" "👨" "👨" "👨" "👨" 

dzenzes

Keybase proof

I hereby claim:

• I am dzenzes on github.
• I am danielzenzes (https://keybase.io/danielzenzes) on keybase.
• I have a public key ASCRi10mXvSD5Dhh_npOM2n_zyPByMc893HAs9w2k5nC0Ao

To claim this, I am signing this object:

dzenzes

Keybase proof

I hereby claim:

• I am dzenzes on github.
• I am danielmies (https://keybase.io/danielmies) on keybase.
• I have a public key ASBBAML6rftlPTX9zAtlR5DE1bmMENDwNzfPqFgk05K_wgo

To claim this, I am signing this object:

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:

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

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

dzenzes

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

dzenzes

<web-components></web-components>

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

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