HTML5 & custom element & template

HTML5 & custom element & template

template

https://codepen.io/xgqfrms/pen/eYYExvp

https://css-tricks.com/creating-a-custom-element-from-scratch/

<template id="dialog-template">
  <script>
    document.getElementById('launch-dialog').addEventListener('click', () => {
      const wrapper = document.querySelector('.wrapper');
      const closeButton = document.querySelector('button.close');
      const wasFocused = document.activeElement;
      wrapper.classList.add('open');
      closeButton.focus();
      closeButton.addEventListener('click', () => {
        wrapper.classList.remove('open');
        wasFocused.focus();
      });
    });
  </script>
  <style>
    .wrapper {
      opacity: 0;
      transition: visibility 0s, opacity 0.25s ease-in;
    }
    .wrapper:not(.open) {
      visibility: hidden;
    }
    .wrapper.open {
      align-items: center;
      display: flex;
      justify-content: center;
      height: 100vh;
      position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      opacity: 1;
      visibility: visible;
    }
    .overlay {
      background: rgba(0, 0, 0, 0.8);
      height: 100%;
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      width: 100%;
    }
    .dialog {
      background: #ffffff;
      max-width: 600px;
      padding: 1rem;
      position: fixed;
    }
    button {
      all: unset;
      cursor: pointer;
      font-size: 1.25rem;
      position: absolute;
        top: 1rem;
        right: 1rem;
    }
    button:focus {
      border: 2px solid blue;
    }
  </style>
  <div class="wrapper">
  <div class="overlay"></div>
    <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="content">
      <button class="close" aria-label="Close">️</button>
      <h1 id="title">Hello world</h1>
      <div id="content" class="content">
        <p>This is content in the body of our modal</p>
      </div>
    </div>
  </div>
</template>

<button id="launch-dialog">Launch dialog</button>

const template = document.getElementById('dialog-template');

document.body.appendChild(
  document.importNode(template.content, true)
);

#launch-dialog {
  background: tomato;
  border-radius: 4px;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0.5rem 1rem;
  position: static;
}

web components & custom elements

https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

https://developers.google.com/web/fundamentals/web-components/customelements

---

HTML5 & command element

https://www.quackit.com/html_5/tags/html_command_tag.cfm

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/command

<command
    type="command"
    label="Save"
    icon="icons/save.png"
    onclick="save()"
/>

2018

https://caniuse.com/#search=command

2020

https://caniuse.com/#search=command

---

---