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

DeepDoge left a comment (WICG/webcomponents#1029)

I think it would be useful to consider how this could be used in JavaScript when not parsed from HTML.

Right now, we can create and use attributes like this:
```js
const myAttr = document.createAttribute("hello")
myAttr.value = "world"

myElement.setAttributeNode(myAttr)

myAttr.value = "new value"
```

Similar to custom elements implementation, we should be able to create attributes with `new` keyword:
```js
class MyAttr extends Attr {
    static {
        customAttributes.define("my-attr", this)
    }
}

const myAttr = new MyAttr()
```
_IMO, I don't think it's a good idea to add separate registries per `Element` type. We can validate the element type on `connectedCallback`. Guards being on the userland makes more sense, since they might check some other things and not strictly the `Element` type or its prototype chain. Also this keeps to the implantation less complex._

And also similar to custom elements, we can construct instances of attributes with props, using `constructor` arguments.
```ts
class AutoPlayOnIntersect extends Attr {
    static {
        customAttributes.define("x-autoplay-on-intersect", this)
    }

    constructor(options: IntersectionObserverInit) {
      ...
    }
    
    ...
}

myVideoElement.setAttributeNode(new AutoPlayOnIntersect({ ... }))
```

<details>

<summary>
<strong>For Typescript safety</strong>
</summary

IMO for Typescript safety DOM type for `Attr` and places that use it like `Element.prototype.setAttributeNode` can be updated, while keeping it backwards compatible with a default type as `Element`.

_I think `NamedNodeMap` can stay as is._

```ts
interface Attr<T extends Element = Element> {
    ownerElement: T | null
}

interface Element {
    ...
    setAttributeNode(attr: Attr<this>): Attr | null
    ...
}
```

This can be opened as PR at https://github.com/microsoft/TypeScript-DOM-lib-generator later, not necessary atm.

</details>

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

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