Flexbox center a div (wrong answers only)

flex-center-component.html

<script>
  class FlexCenter extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });

      const wrapper = document.createElement('div');
      wrapper.classList.add('center');

      const slot = document.createElement('slot');
      wrapper.appendChild(slot);

      const style = document.createElement('style');
      style.textContent = `
        .center {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
        }
      `;

      shadow.appendChild(style);
      shadow.appendChild(wrapper);
    }
  }

  customElements.define('flex-center', FlexCenter);
</script>

<flex-center style="height: 100vh;">
  <div>Centered Content</div>
</flex-center>