Indexing HTML Attributes and Unique Indexes

Andrea Giammarchi andrea.giammarchi at gmail.com
Wed May 22 17:33:34 UTC 2019


live *

On Wed, May 22, 2019 at 7:25 PM Andrea Giammarchi <
andrea.giammarchi at gmail.com> wrote:

> 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/cf1c6c68/attachment-0001.html>


More information about the es-discuss mailing list