Skip to content

Instantly share code, notes, and snippets.

@tolluset
Created March 27, 2022 14:12
Show Gist options
  • Save tolluset/6a86f21973ddc3299d18a34acde0d78a to your computer and use it in GitHub Desktop.
Save tolluset/6a86f21973ddc3299d18a34acde0d78a to your computer and use it in GitHub Desktop.
Web component with shadow dom
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);
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment