<define-element> #60

DrSensor · 2023-02-01T08:42:19Z

Has same signature as <render-scope> but for defining a custom-element.

<define-element let=my-form extends=form>
  <link href=module.js>

  <template :=self root=closed>
    <input type=number :: on:change=set:count>
    <slot>
      <button :: value:=count>0</button>
    </slot>
  </template>
</define-element>

It only fetch then apply linked modules when the custom-element is in view.

Note that it use root=open/closed instead of shadowroot=open/closed to avoid ghosted elements

Warning it may cause layout shift

TODO

define custom-element
extends from existing HTML<*>Element
delete custom-element from registry when disconnected from document
immediate query and lazy bind on every slotchange

<awesome-button>singleton burton</awesome-button>

<render-scope>
  <link let=animate href=random-animation.js css.var="random duration">

  <template shadowrootmode=closed>
    <cool-button instance=false>singleton Brrr</cool-button>
    <awesome-button instance> instanced burton</awesome-button>
    <cool-button>instanced Brrr</cool-button>
  </template>

  <template instance define=cool-button use=animate>
    <button style="
        padding: 0.5rem 1rem;
        border: 2px solid black;
        border-radius: 0px;
        box-shadow: 4px 4px 0px gray;
        animation: var(--animate\.random);
        animation-duration: var(--animate\.duration);
      "
      disabled ~ !disabled
      @click=animate.shuffle
    ><slot /></button>
  </template>

  <template global define=awesome-button>
    <cool-button>
      <slot /> is awesome with <span ~ #text=animate.random /> animation
    </cool-button>
  </template>
</render-scope>

By default, each custom-element defined inside render-scope will use the same instance of all linked modules. To make each custom-element unique, instantiate attribute need to be specified so it will instantiate all linked modules every time custom-element is created. You can control which module to use (or instantiate) by using use attribute, by default it allow (and may instantiate) all modules in <render-scope>.

I'm going to reopen this.
I think there's a way to prevent layout shift by making <body hidden ~ !hidden> until <render-scope> is defined/loaded.

DrSensor · 2023-07-04T01:21:40Z

Declarative <custom-element> via <template define=custom-element> has fatal footgun when the template has <slot>. There is no way to automatically hide custom-element because the children will be rendered first before script is ready which cause glitch. At worst it show incorrect content (only show children inside of custom-element) when the JavaScript is disabled. The workaround is to use global hidden attribute on every <custom-element>.

<render-scope>
  <link let=c href=counter.js>

  <template shadowrootmode=closed>
    <div ~ !hidden>loading...</div>
    <my-counter hidden ~ !hidden count=0></my-counter>
  </template>

  <template instance define=my-counter>
    <button ~ @click=c.increment>$count</button>
    <input value=$count ~ @change=set:c.count .value=c.count>
  </template>
</render-scope>

Another alternative would be to use manual slot assignment on named slot.

Note that the initial mode of declarative shadow dom is always be slotAssignment: "named"

<render-scope>
  <link let=c href=counter.js>

  <template shadowrootmode=closed>
    <slot name=counter count=0></slot>
  </template>

  <div #instance slot=counter style=display:contents>
    <button ~ @click=c.increment>$count</button>
    <input value=$count ~ @change=set:c.count .value=c.count>
  </div>
</render-scope>

⬇️ Downside:

awkward custom attributes which:
- may conflict with built-in <slot> and global attributes 🤔
- may have incorrect attribute value when JavaScript disabled 😱
glitch in text interpolation and worst the text only show the identifier rather than the value 😢
no <style> encapsulation 😢
can't render in multiple slots 😱 (browser engine can't render same Node in multiple place)

Solution:

style encapsulation:
- handle <style type=scoped> (not work if JavaScript disabled 😢)
- use <template shadowrootmode=open> in the light DOM (i.e <div>) and declare <style> inside that shadow DOM
custom attributes:
- disallow custom attributes 🤪
- use special prefix/suffix for name/binding of that custom attribute

<render-scope>
  <link let=c href=counter.js>

  <template shadowrootmode=closed>
    <slot name=counter $count=0 ~ .$suffix=c.count>Parent is</slot>
  </template>

  <div #instance slot=counter style=display:contents>
    <slot></slot> <span ~ #text=$suffix></span>
    <button ~ @click=c.increment #text=$count>loading...</button>
    <input value="loading..." ~ @change=set:c.count .value="$count~>c.count">
  </div>
</render-scope>

Note: make sure to provide a default value to handle missing custom attributes

All children inside <slot> will be moved/copied to all slot.assignedElements() 🤔

DrSensor · 2023-07-04T03:21:22Z

I guess layout shift bound to be inevitable due to engine limitation 😅

Let's keep the <custom-element> approach

<render-scope>
  <link let=c href=counter.js>

  <template shadowrootmode=closed>
    <my-counter count=0 hidden ~ !hidden .suffix=c.count>Parent is</my-counter>
  </template>

  <template -let=prop -instance -define=my-counter>
    <slot></slot> <prop.suffix/>
    <button ~ @click=c.increment><prop.count/></button>
    <input value=prop.count ~ @change=set:c.count .value=c.count>
  </template>
</render-scope>

DrSensor added enhancement New feature or request priority: low Low hanging issue. Might not worth to tackle it now. labels Feb 1, 2023

DrSensor added this to ༼◕․◕༽༼•̀․◕༽༼◕․•́༽༼•̀ﮧ◕༽༼◕̀̀ﮧ•́༽༼◕̀̀ﮧ◕༽༼ ͡°․ ͡°༽༼◕̀̀․˂༽ Feb 1, 2023

DrSensor closed this as not planned Won't fix, can't repro, duplicate, stale May 15, 2023

github-project-automation bot moved this to Done in ༼◕․◕༽༼•̀․◕༽༼◕․•́༽༼•̀ﮧ◕༽༼◕̀̀ﮧ•́༽༼◕̀̀ﮧ◕༽༼ ͡°․ ͡°༽༼◕̀̀․˂༽ May 15, 2023

DrSensor reopened this Jun 6, 2023

github-project-automation bot moved this from Done to In Progress in ༼◕․◕༽༼•̀․◕༽༼◕․•́༽༼•̀ﮧ◕༽༼◕̀̀ﮧ•́༽༼◕̀̀ﮧ◕༽༼ ͡°․ ͡°༽༼◕̀̀․˂༽ Jun 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<define-element> #60

<define-element> #60

DrSensor commented Feb 1, 2023 •

edited

Loading

DrSensor commented May 15, 2023 •

edited

Loading

DrSensor commented Jun 6, 2023 •

edited

Loading

DrSensor commented Jul 4, 2023 •

edited

Loading

DrSensor commented Jul 4, 2023 •

edited

Loading

<define-element> #60

<define-element> #60

Comments

DrSensor commented Feb 1, 2023 • edited Loading

TODO

Related

Declarative Syntax for Custom Elements (strawman proposal)

DrSensor commented May 15, 2023 • edited Loading

DrSensor commented Jun 6, 2023 • edited Loading

DrSensor commented Jul 4, 2023 • edited Loading

DrSensor commented Jul 4, 2023 • edited Loading

DrSensor commented Feb 1, 2023 •

edited

Loading

DrSensor commented May 15, 2023 •

edited

Loading

DrSensor commented Jun 6, 2023 •

edited

Loading

DrSensor commented Jul 4, 2023 •

edited

Loading

DrSensor commented Jul 4, 2023 •

edited

Loading