element-base.mjs

export default class ElementBase extends HTMLElement {
  constructor() {
    super()
    const name = this.tagName.toLowerCase()
    const template = document.getElementById(`${name}-template`)
    if (template) {
      this.replaceChildren(template.content.cloneNode(true))
    }
  }
}

enhance-element.mjs

import ElementBase from './element-base.mjs'
import ShadowBase from './shadow-base.mjs'

const enhance = {}

enhance.register = function register(tag, options) {
  const opts = Object.assign({}, options)
  const Base = opts.shadow
    ? ShadowBase
    : ElementBase
  const adoptedCallback = opts.adoptedCallback
  delete opts.adoptedCallback
  const connectedCallback = opts.connectedCallback
  delete opts.connectedCallback
  const disconnectedCallback = opts.disconnectedCallback
  delete opts.disconnectedCallback

  class EnhanceElement extends Base {
    constructor() {
      super()
      Object.keys(opts)
        .map(k => Object.defineProperty(this, k, {
          value: opts[k],
          writable: false
        })
      )
      this.init(this)
    }

    static get observedAttributes() {
      return opts.observedAttributes
    }

    attributeChangedCallback(name, oldValue, newValue) {
      if (oldValue !== newValue) {
        const fName = `${name}Update`
        if (this[fName]) {
          this[fName](newValue)
        }
      }
    }
  }

  function checkConnected() {
    if (this.isConnected) {
      connectedCallback.call(this)
    }
  }

  EnhanceElement.prototype.adoptedCallback = adoptedCallback
  EnhanceElement.prototype.connectedCallback = checkConnected
  EnhanceElement.prototype.disconnectedCallback = disconnectedCallback

  customElements.define(
    tag,
    EnhanceElement
  )
}

export default enhance

shadow-base.mjs

export default class ShadowBase extends HTMLElement {
  constructor() {
    super()
    const id = this.getAttribute('id')
    const authored = document.getElementById(`${id}-template`)
    if (authored) {
      this.replaceChildren(authored.content.cloneNode(true))
    }
    const name = this.tagName.toLowerCase()
    const template = document.getElementById(`${name}-template`)
    if (template) {
      this.attachShadow({ mode: 'open' })
        .appendChild(template.content.cloneNode(true))
    }
  }
}

slider.mjs

export default function Slider({ html, state }) {
  return html`
    <input type="range"/>
    <script type="module">
      import enhance from '/_static/enhance.mjs'
      const slider = {
        shadow: false,

        observedAttributes: [
          'max',
          'min'
        ],

        init(el) {
          console.log(el)
          const r = el.querySelector('input[type="range"]')
          r.addEventListener('change', el.onChange.bind(el))
        },

        onChange(e) {
          console.log('E: ', e, this)
        },

        maxUpdate(value) {
          console.log('MAX UPDATED: ', value, this)
        },


        minUpdate(value) {
          console.log('MIN UPDATED: ', value)
        },

        connectedCallback() {
          console.log('WHADDAP!')
        }
      }
      enhance.register('x-slider', slider)
    </script>
  `
}