<div dir="ltr">live *<br></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Wed, May 22, 2019 at 7:25 PM Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>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.</div><div><br></div><div>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:</div><div><a href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4" target="_blank">https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4</a></div><div><br></div><div>About being unique, you can always `document.querySelector('[attribute="' + value +'"]')` and, if not null, throw an error 'cause already live on the DOM.</div><div><br></div><div>However, IDs are the most "unique" thing you can have, even if 2 IDs with same content are still allowed love on the document.</div><div><br></div><div>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).</div><div><br></div><div>Regards<br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Wed, May 22, 2019 at 7:07 PM Randy Buchholz <<a href="mailto:work@randybuchholz.com" target="_blank">work@randybuchholz.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">





<div lang="EN-US">
<div class="gmail-m_-2624175700930788465gmail-m_4260685156371809061WordSection1">
<p class="MsoNormal">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.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">class MyElement extends HTMLElement{<u></u><u></u></p>
<p class="MsoNormal">    attrib myAttrib(‘my-attribute’) index distinct;<u></u><u></u></p>
<p class="MsoNormal">}<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">This would create the attribute `my-attribute` on the tag and element, and also generate a getter and setter<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">    get myAttrib() { return this.getAttribute(‘my-attribute’); }<u></u><u></u></p>
<p class="MsoNormal">    set myAttrib(v) { this.setAttribute(‘my-attribute’, v); }<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">The `index` flag it would tell the engine it should create a map/hash to improve search optimization for heavily searched attributes.<u></u><u></u></p>
<p class="MsoNormal">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.
<u></u><u></u></p>
</div>
</div>

_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>
</blockquote></div>