Skip to content

Instantly share code, notes, and snippets.

@blinkinglight

blinkinglight/file.js

Last active October 17, 2024 09:58
Show Gist options
  • Save blinkinglight/5475b79aa454719f0cd8b36baf3984a7 to your computer and use it in GitHub Desktop.
Save blinkinglight/5475b79aa454719f0cd8b36baf3984a7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. blinkinglight revised this gist Oct 17, 2024. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions main.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <my-custom-element data-bind-value="$test" data-on-change="$test=event.detail"></my-custom-element>
  2. blinkinglight created this gist Oct 17, 2024.
    38 changes: 38 additions & 0 deletions file.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    class MyCustomElement extends HTMLElement {
    constructor() {
    super();

    const template = document.createElement('template');
    template.id = 'pool-calculator-template';
    template.innerHTML = `
    <input type="text" id="input"/>
    `;
    // this.appendChild(template);
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.appendChild(template.content.cloneNode(true));

    this.input = this.shadow.getElementById('input');

    this.input.value = this.getAttribute('value');
    this.input.onkeyup = () => {
    this.setAttribute('value', this.input.value);
    this.dispatchEvent(
    new CustomEvent('change', { detail: this.input.value })
    );
    };
    }

    static get observedAttributes() {
    return ['value'];
    }
    static get formAssociated() {
    return true;
    }

    attributeChangedCallback(name, oldValue, newValue) {
    this.input.value = newValue;
    }
    // our custom element code
    }

    customElements.define('my-custom-element', MyCustomElement);