element(tag,props)

by WebComponents

HTML

<script>
  customElements.define("my-component", class extends HTMLElement {
    constructor() {
      const element = (tag, props = {}) => Object.assign(document.createElement(tag), props);
      super()
        .attachShadow({mode:"open"})
        .append(
          element("STYLE",{
            innerText: "span { display:inline-block;width:3em;background:pink }"
          }),
          element("SPAN",{ innerHTML : "<slot></slot>" }),
          this.input = element("INPUT", {
                                type       : "text",
                                placeholder: "type something",
                                onkeyup    : (evt) => this.button.hidden = false
          }),
          this.button = element("BUTTON", {
                                 innerText: "clear",
                                 onclick  : (evt) => (this.input.value = "", this.button.hidden = true),
                                 hidden   : true
          }),
          element("BR")
        )
    }
  });
</script>
<my-component>FOO</my-component>
<my-component>BAR</my-component>
<my-component>BAZ</my-component>

CSS

body{
  font:15px Arial;
  background:beige;
}
li{
  margin-top:.1em;
}
span{
  display:inline-block;
  font-size:80%;
  width:5em;
}
h4{
  margin-top:0;
  margin-bottom:0;
}