Re: [WICG/webcomponents] Proposal: Custom attributes for all elements, enhancements for more complex use cases (Issue #1029)

Some little type-safety can be achieved.

```ts
declare global {
    interface CustomAttributeRegistry<T extends Element> {
        define<TAttr extends Attr>(
            name: string,
            attribute: T extends TAttr["ownerElement"] ? { new (): TAttr } : never
        ): void
    }
}

declare var HTMLVideoElement: {
    prototype: HTMLVideoElement
    new (): HTMLVideoElement
    customAttributes: CustomAttributeRegistry<HTMLVideoElement>
}

declare var HTMLImageElement: {
    prototype: HTMLImageElement
    new (): HTMLImageElement
    customAttributes: CustomAttributeRegistry<HTMLImageElement>
}

class AutoPlayWhenVisibleAttr extends Attr {
    public override readonly ownerElement: HTMLVideoElement | null
    public override value: "true" | "false"

    // When element is connected to DOM and attribute is added to the element
    connectedCallback() {
        /* start logic */
    }

    // When element is disconnected from the DOM or "before" attribute is removed from the element
    disconnectedCallback() {
        /* cleanup logic */
    }
}

HTMLVideoElement.customAttributes.define("autoplay-on-visible", AutoPlayWhenVisibleAttr)
HTMLImageElement.customAttributes.define("autoplay-on-visible", AutoPlayWhenVisibleAttr) // type error
```

Also something to get/set/remove attribute by not name, but constructor would be infinitely helpful.
I'm not sure how it should look but something like this.
```ts
element.attributes.getItemByConstructor(MyAttribute) satisfies MyAttribute | null
element.getAttributeNodeByConstructor(MyAttribute) satisfies MyAttribute | null
// It can be overloaded to already existing methods as well
element.getAttributeNode(MyAttribute) satisfies MyAttribute | null
```

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

Message ID: <WICG/webcomponents/issues/1029/2621364132@github.com>