Indexing HTML Attributes and Unique Indexes

Andrea Giammarchi andrea.giammarchi at gmail.com
Wed May 22 17:25:29 UTC 2019


With Custom Elements you have `attributeChangedCallback` which reacts after
`observedAttributes` returned attributes, and I believe you'd like to use
that to create getters and setters out of the box.

I don't think DOM specific class fields/syntax will ever land in JS itself,
but I can suggest you looking at most handy custom elements patterns in
here:
https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4

About being unique, you can always `document.querySelector('[attribute="' +
value +'"]')` and, if not null, throw an error 'cause already live on the
DOM.

However, IDs are the most "unique" thing you can have, even if 2 IDs with
same content are still allowed love on the document.

If you look for an easy way to have unique IDs, remember you can start from
`let id = Math.random()` and do `++id` any other time to have a new, rarely
clashing, unique name. Prefix it with the `nodeName` and see you've already
all uniqueness you need for you custom elements, since you can't define two
custom elements with the same name anyway (yet, unless scoped, but that's
another story).

Regards

On Wed, May 22, 2019 at 7:07 PM Randy Buchholz <work at randybuchholz.com>
wrote:

> I’ve been working with `Custom Elements` and I’m writing a lot of code
> against tag attributes. In some cases, I want the attribute values to be
> unique on a page (like `id`).  It got me wondering about how the engines
> handle attribute based searches, and if indexing (with unique/distinct
> options) would provide value. I also find myself writing a lot of
> boilerplate getters/setters for attributes in the elements. Attribute
> handling could be improved by adding some additional support with something
> like an `attrib` feature. This would be similar to `get` or `set` in use.
>
>
>
> ```
>
> class MyElement extends HTMLElement{
>
>     attrib myAttrib(‘my-attribute’) index distinct;
>
> }
>
> ```
>
> This would create the attribute `my-attribute` on the tag and element, and
> also generate a getter and setter
>
> ```
>
>     get myAttrib() { return this.getAttribute(‘my-attribute’); }
>
>     set myAttrib(v) { this.setAttribute(‘my-attribute’, v); }
>
> ```
>
> The `index` flag it would tell the engine it should create a map/hash to
> improve search optimization for heavily searched attributes.
>
> The `distinct` flag would indicate that all values for that attribute
> within context (e.g., document) should be unique. This might be used
> primarily by IDE’s to generate warnings.
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190522/598579dc/attachment.html>


More information about the es-discuss mailing list