<div dir="ltr"><div>> while it could be considered a sub-set, JS is full of HTML related features - `HTMLElement` for one.</div><div><br></div><div>HTMLElement is defined by the living DOM standard (WHATWG) <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement">https://html.spec.whatwg.org/multipage/dom.html#htmlelement</a></div><div><br></div><div>it has nothing to do with JS.</div><div><br></div><div>JS is a general purpose programming language that implements ECMAScript standard, which on the Web gets enriched with some functionality, while on NodeJS it gets enriched with some other (and indeed HTMLELement doesn't exist there).</div><div><br></div><div>In GJS (Dekstop UI) it has other features too, so asking in a JS related mailing list to bring in something strictly DOM related (whatwg) is not appropriate.</div><div><br></div><div>Historically speaking, the only thing that went in strictly DOM related where things like String.prototype.blink methods and others, but today JS is *really* not Web based anymore, even if Web is one of its primary goals (but then again, with WASM around, any programming language can target the Web, so you want this proposal to land in WHATWG, not here).</div><div><br></div><div>Regards<br></div><div><br></div><div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, May 23, 2019 at 7:15 PM Randy Buchholz <<a href="mailto:work@randybuchholz.com">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_-682021607598287971WordSection1">
<p class="MsoNormal"><a id="gmail-m_-682021607598287971OWAAM83D49FBF518C4359B48505674C52706E" href="mailto:andrea.giammarchi@gmail.com" target="_blank"><span style="font-family:"Calibri",sans-serif;text-decoration:none">@Andrea Giammarchi</span></a>, While the connection is secondary, HTML often serves
 as the specification for the creation of JS objects. And while it could be considered a sub-set, JS is full of HTML related features - `HTMLElement` for one. Thing is, if you are programming in JS for browser applications, you’re dealing with HTML-adjacent
 JS at some point. What I’m trying to do, though, somewhat supports your point.  I see a lot of higher-level code manipulating HTML tags, which feels really wrong. Even dealing with `HTMLElement` in higher-level code doesn’t seem to make a lot of sense.  I’m
 trying to encapsulate the elements and tags, and move that point as far into the background as I can.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><a id="gmail-m_-682021607598287971OWAAMDFA2C7235788439E9F1548CACB9BFE49" href="mailto:guest271314@gmail.com" target="_blank"><span style="font-family:"Calibri",sans-serif;text-decoration:none">@guest271314</span></a><u></u><u></u></p>
<p class="MsoNormal">If we think of Indexes as a type of key-value pairs, a “regular” Index  allows duplicate keys, and a Unique Index requires unique keys. Indexes are always sorted on their keys. So in this case, when the index is built, it creates k-v pairs
 of attributeName-elementId, ordered by attributeName.  To get all elements with a specific attribute, we just find the first one with that key, and keep reading -`getElementbyId(elementId)` - until the key changes.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">You’re right about `id`. I’m converting generic, multi-instance template “tags” into  elements with id’s, so I can access them directly without searching. Just using `getElementById`. The template as been “localized” per instance, and encapsulated
 behind a controller. I want to avoid dealing with HTML, and even more HTTP verb related things like `Form` and `FormData` and just deal with general JS objects, so I use Models instead of things like `FormData`.  <u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">So for example, the business perspective of a ”Person” has “Age” data. A page may display multiple people at once.<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><custom-person id=’person1’><u></u><u></u></p>
<p class="MsoNormal"><custom-person id=’person2’><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">The goal is to get from the source tag to non-html/element related JS as soon as possible.    <u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">The template behind this might look something like<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><framework-container><u></u><u></u></p>
<p class="MsoNormal">   <input prop=’name’ /><u></u><u></u></p>
<p class="MsoNormal">    <input prop=`age` /><u></u><u></u></p>
<p class="MsoNormal"></framework-container><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">When `connectedCallback` runs, it creates  a `View` using the template<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><sometag><u></u><u></u></p>
<p class="MsoNormal">   <input id=’person1_name` /><u></u><u></u></p>
<p class="MsoNormal">   <input id=`person1_age` /><u></u><u></u></p>
<p class="MsoNormal"></sometag><u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><sometag><u></u><u></u></p>
<p class="MsoNormal">    <input id=’person2_name’ /><u></u><u></u></p>
<p class="MsoNormal">    <input id=’person2_age’ /><u></u><u></u></p>
<p class="MsoNormal"></sometag><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">A `Model`<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">class person{<u></u><u></u></p>
<p class="MsoNormal">    name;<u></u><u></u></p>
<p class="MsoNormal">    age;<u></u><u></u></p>
<p class="MsoNormal">}<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">And a dynamically configured `Controller` and instance. A base Person class contains common functionality.<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">class Person1 extends Person{<u></u><u></u></p>
<p class="MsoNormal">    get name(){ return document.getElementById(‘person1_name’)<u></u><u></u></p>
<p class="MsoNormal">    …<u></u><u></u></p>
<p class="MsoNormal">    get model(){ return this.populateModel();}<u></u><u></u></p>
<p class="MsoNormal">}<u></u><u></u></p>
<p class="MsoNormal">self.controllers.add(new Person1());<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">Now I don’t need to deal with any HTML/element or “tag hierarchy” related JS. I pretty much abstract out the HTML and HTMLElement pieces when the Custom Element is initially loaded.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">    const personAge = self.controllers.person1.age;  <u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">At a lower level, I can create attribute related properties using the dynamically assigned element id.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><input prop=’name’ attrib=’style.color’ /><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">This would end up creating a property or methods on the controller that allows me to not have to deal with styles and CSS classes directly, and even constrain values.
<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">self.controllers.person1.name.color = “red”;<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">So the whole index thing started when I was loading/parsing dynamic html/JS code and searching for `prop` and `attrib` repeatedly. If I know I’m going to be searching on an attribute a lot, maybe I could give the parser/engine a hint it
 could use to optimize that search.<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>