class MainWindow extends HTMLElement {
  static observedAttributes = ['width', 'height', 'gap'];

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {

    this.shadowRoot.innerHTML = `
    <style>
      div {
        width: ${this.getAttribute('width')};
        height: ${this.getAttribute('height')};
        box-sizing: border-box;
        padding: 50px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 5px 12px #0000001F;
        border-radius: 20px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        row-gap: ${this.getAttribute('gap')};
      }
    </style>
    <div>
      <slot></slot>
    </div>
    `;
  }
}

customElements.define('main-window', MainWindow);