<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0in;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:#0563C1;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
span.EmailStyle17
        {mso-style-type:personal-compose;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri",sans-serif;}
@page WordSection1
        {size:8.5in 11.0in;
        margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><a id="OWAAM83D49FBF518C4359B48505674C52706E" href="mailto:andrea.giammarchi@gmail.com"><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.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><a id="OWAAMDFA2C7235788439E9F1548CACB9BFE49" href="mailto:guest271314@gmail.com"><span style="font-family:"Calibri",sans-serif;text-decoration:none">@guest271314</span></a><o:p></o:p></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.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></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`.  <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">So for example, the business perspective of a ”Person” has “Age” data. A page may display multiple people at once.<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><custom-person id=’person1’><o:p></o:p></p>
<p class="MsoNormal"><custom-person id=’person2’><o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">The goal is to get from the source tag to non-html/element related JS as soon as possible.    <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">The template behind this might look something like<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><framework-container><o:p></o:p></p>
<p class="MsoNormal">   <input prop=’name’ /><o:p></o:p></p>
<p class="MsoNormal">    <input prop=`age` /><o:p></o:p></p>
<p class="MsoNormal"></framework-container><o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">When `connectedCallback` runs, it creates  a `View` using the template<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><sometag><o:p></o:p></p>
<p class="MsoNormal">   <input id=’person1_name` /><o:p></o:p></p>
<p class="MsoNormal">   <input id=`person1_age` /><o:p></o:p></p>
<p class="MsoNormal"></sometag><o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><sometag><o:p></o:p></p>
<p class="MsoNormal">    <input id=’person2_name’ /><o:p></o:p></p>
<p class="MsoNormal">    <input id=’person2_age’ /><o:p></o:p></p>
<p class="MsoNormal"></sometag><o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">A `Model`<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">class person{<o:p></o:p></p>
<p class="MsoNormal">    name;<o:p></o:p></p>
<p class="MsoNormal">    age;<o:p></o:p></p>
<p class="MsoNormal">}<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">And a dynamically configured `Controller` and instance. A base Person class contains common functionality.<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">class Person1 extends Person{<o:p></o:p></p>
<p class="MsoNormal">    get name(){ return document.getElementById(‘person1_name’)<o:p></o:p></p>
<p class="MsoNormal">    …<o:p></o:p></p>
<p class="MsoNormal">    get model(){ return this.populateModel();}<o:p></o:p></p>
<p class="MsoNormal">}<o:p></o:p></p>
<p class="MsoNormal">self.controllers.add(new Person1());<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></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.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">    const personAge = self.controllers.person1.age;  <o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">At a lower level, I can create attribute related properties using the dynamically assigned element id.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><input prop=’name’ attrib=’style.color’ /><o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></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.
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal">self.controllers.person1.name.color = “red”;<o:p></o:p></p>
<p class="MsoNormal">```<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></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.<o:p></o:p></p>
</div>
</body>
</html>