Alternatives

[dy]

Hi! Just want to share existing attempts in this area, maybe you can find interesting for analysis:

• EPA-WG custom-element
• vue3 single piece
• uce-template
• declarative custom elements
• snuggsi
• Template Instantiation proposal

[trusktr]

Nice, thanks for making this list.

[trusktr]

• https://tram-one.io/tram-lite/

[dy]

I also had one with the following syntax:

<define-element>
  <x-timer start:number="0">
    <template>
      <time part="timer">{{ count }}</time>
    </template>
    <script scoped>
      this.params.count = this.props.start
      let id
      this.onconnected = () => id = setInterval(() => this.params.count++, 1000)
      this.ondisconnected = () => clearInterval(id)
    </script>
  </x-timer>

  <x-counter count:number="0">
    <template>
      <output>{{ count }}</output>
      <button part="inc">+</button>
      <button part="dec">‐</button>
    </template>
    <script scoped>
      this.parts.inc.onclick = e => this.props.count++
      this.parts.dec.onclick = e => this.props.count--
    </script>
  </x-counter>
</define-element>

<x-timer start="0"/>
<x-counter count="0"/>

But it raises few main r&d questions:

• Tags structure
• Templating
• Scoped/unscoped scripts/styles
• Shipping (es module vs html import?)

I kind-of explored options, but still quite risky to implement, since there was w3c standard research

[trusktr]

Hey @dy, do you want to present your PoC at the upcoming "demo day" where we'll present various PoCs? If so, leave a comment here with your PoC:

https://github.com/w3c/webcomponents-cg/issues/80