Re: [WICG/webcomponents] [scoped-registries] reduce pain by preventing logic from ever touching non-upgraded custom elements (Issue #960)

denis-migdal left a comment (WICG/webcomponents#960)

We still need to be able to create non-upgraded elements with `.createElement()`, `.cloneNode()`, and `.innerHTML` (for templates).

I'm all for the `{upgrade: false}` option (and I kind of need it).

> Needing to handle pre-upgrade properties and values for custom elements whose instances are used before they are upgraded requires hideous difficult-to-read and error-prone code.

My rule is to only interact with custom elements as if it was a `HTMLElement` (i.e. non-upgraded), i.e. modifying attributes, host content, etc. but nothing more.

For pre-upgrade values, I have a little solution:

```js
export function getInitialValue(e, name, defaultValue): {

    if( ! Object.hasOwn(e, name) )
        return defaultValue;

    const  _ = e[name];
    delete     e[name];
    return _;
}

class X extends HTMLElement() {
    constructor() {
        super();
        
        let val = getInitialValue(this, "myprop");
    }

    get myprop(...) { ... }
}
```

Maybe the initial properties could be automatically collected upon upgrade, stored in `elem[SOME_SYMBOL]`, then accessible with something like `customElements.getInitialProperties(elem)` ? I dunno.


Else, with a system of "signals", you can get values before the custom element is upgraded:
```js
mySignal = getSignal(elem);

if( mysignal.hasValue)
    //...

mySignal.listen( () => {...});
await mySignal.whenHasValue;
// whatever methods you can think of.
```

`getSignal()` simply has to fetch a signal stored in the upgraded element (if upgraded), otherwise, to create one, and to store it on the non-upgraded custom element.


But, yes, correctly using custom elements are a pain. Lots of tricks and traps, and nowhere we can find how to *properly* use them.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/960#issuecomment-2663701226
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/960/2663701226@github.com>