3 ms·
CSS pollutes global without <style scoped> or shadow root. Even simpler variant: <form> <button onclick="form.counter.value -= 1;return false">-</but
by sergeykish 6y ago
CSS pollutes global without <style scoped> or shadow root. Even simpler variant:
<form>
<button onclick="form.counter.value -= 1;return false">-</button>
<input name="counter" value="0">
<button onclick="form.counter.value = 1 + +form.counter.value;return false">+</button>
</form>
Custom elements is just a mutation observer with callbacks, can be used with DOM 0 as well:
class MyCounter extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).innerHTML = `<style>...</style><form>...</form>`
}
}
customElements.define('my-counter', MyCounter)