Web component with shadow dom

winningNumbers.js

import { LOTTO_COUNTS, LOTTO_NUMBERS_LIMIT, LOTTO_NUMBERS_START } from '../constants';

const template = document.createElement('template');

const makeWinningNumberInput = () => {
  const inputs = [];
  while (inputs.length < LOTTO_COUNTS) {
    const tagString = `
        <input 
            type="number"
            min=${LOTTO_NUMBERS_START}
            max=${LOTTO_NUMBERS_LIMIT}
            data-index=${inputs.length + 1}
            required
            class="winning-number mx-1 text-center"
        />
    `;
    inputs.push(tagString);
  }

  return inputs.join('');
};

template.innerHTML = makeWinningNumberInput();

export default class WinningNumbers extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    // Use when need the css from the origin, like util classes
    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', '../src/css/index.css');

    const wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'winning-numbers');

    shadow.appendChild(linkElem);
    shadow.appendChild(wrapper);
    wrapper.appendChild(template.content);
  }
}


// How to implements 

/* App.js

import WinningNumbers from './components/winningNumber';

...

customElements.define('winning-numbers', WinningNumbers);

*/