Web Component Design Pattern

component.html

<image-profile circle="true"></image-profile>
<image-profile></image-profile>
<image-profile></image-profile>






<img src="" alt="">

<div></div>

<user-card>
  <image-profile ></image-profile>
  <hgroup>
</user-profile>


<template id="image-fader-template">
</template>




<template id="x-product-template">
  <input type="text">
    <button>
    ${test}
    </button>
</template>


<template id="image-profile-template">
  <figure>
    <img width="100px" src="${src}"/>
    <a href="#"></a>
  </figure>
<input type="text">
</template>

<motion name="Sohail"></motion>

<script>

String.prototype.domSafe = function(){
  return this.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
}



class ImageProfile extends HTMLElement {
  constructor() {
    super();
    this.vars = {};
    var t = document.querySelector('#'+ this.constructor.name.domSafe() +'-template');
    var clone = document.importNode(t.content, true);
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.appendChild(clone);
    if (this.getAttribute("circle")){
    this.shadow.querySelector('img').style= "border-radius:50%;";
    }


    this.shadow.querySelector('input').onkeydown = (e)=>{this.src =e.srcElement.value} ;
  }

  get src() {
      return this.vars.src;
  }
  set src(t) {
    this.vars.src = t;
    this.shadow.querySelector('img').src = t;
  }

}


// Create a class for the element
//
class XProduct extends HTMLElement {
  wow(){
    console.log("wowowo")
  }
  constructor() {
    // Always call super first in constructor
    super();
    this.vars = {};
    var t = document.querySelector('#'+ this.constructor.name.domSafe() +'-template');
    var clone = document.importNode(t.content, true);
    // Create a shadow root
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.appendChild(clone);
    console.log(  this.shadow.querySelector('input'));
    this.ori = this.shadow.querySelector('button').innerHTML;
    window.a = this;


    this.shadow.querySelector('input').onkeydown = (e)=>{this.test =e.srcElement.value} ;
  }


      get test() {
          return this.vars.test;
      }
      set test(t) {
        this.vars.test = t;
        this.shadow.querySelector('button').innerHTML = this.ori.replace("${test}", `${this.vars.test}`);
      }


}

// Define the new element
customElements.define('x-product', XProduct);
customElements.define('image-profile', ImageProfile);

</script>

index.html

<link rel="stylesheet" href="style.css">


<div id="app">
  <dialog></dialog>
</div>





<template id="choice">
  <button class="button">A</button>
</template>


<template id="message">
  <p class="message">sdfgsdfg</p>
</template>



<template id="dialog">
  <div onclick="DialogSelect(event)" class="dialog">
    <message></message>
    <choice class="left"></choice>
    <choice class="right"></choice>
  </div>
</template>

<script>
    if ('content' in document.createElement('template')) {

        var template = document.querySelector('#dialog'),
        choice = template.content.querySelectorAll("choice"),
        message = template.content.querySelector("message");

        // dialog
        for(var c = 0 ; c < choice.length; c++ ){
          console.log(c);
          var t = document.querySelector('#choice');
             choice[c].appendChild(document.importNode(t.content, true));
        }

        message.appendChild(document.importNode(document.querySelector('#message').content, true));


        var dialog = document.querySelector('#app');
        console.log(dialog);
        dialog.appendChild(document.importNode(template.content, true));

      //  var clone = document.importNode(choice.content, true);
      //  app.appendChild(clone);

    } else {
        // Find another way to add the rows to the table because
        // the HTML template element is not supported.
    }

  var reload = () => {window.location.reload(true);}
  //setInterval(reload, 1000);


  function CallDialog(text, a , b){
    console.log(choice[0].querySelector('button'));
    var bs = dialog.querySelectorAll('button');
    var p = dialog.querySelector('p');
    p.innerHTML= text;
    bs[0].innerHTML = a;
    bs[1].innerHTML = b;
  };

function DialogSelect(e){
  console.log(e)
};
</script>

style.css

.button{
  background-color: rgba(0,100,200, 0.9);
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  font-family: monospace;
}

.button:hover{
  background-color: rgba(100,100,200, 1);
}

.message{
  font-family: monospace;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  color: rgba(100,100,200, 0.9);
  border: solid 1px rgba(100,100,200, 0.9);
  border-radius: 5px;
}

.dialog{
  width: 200px;
  text-align: center;
}

.dialog .button{
  width: 95px;
  text-align: center;
}