Implement html frontend on duplicated templates

src/pages/options/index.html

@@ -183,15 +183,20 @@
     <nav>
       <form id="pacChooserForm">
         <menu id="radios">
-          <template id="pacRecordTemplate">
+          <my-li>
-            <div>
+          <template shadowrootmode="open">
-              <span id="attributes" hidden>
+            <slot name="pacRecords">PAC_RECORDS</slot>
+          </template>
+          <pac-record slot="pacRecords">
+            <template shadowrootmode="open">
+              <span class="template-inputs" hidden>
                 <slot name="id">ID</slot>
                 <slot name="value">VALUE</slot>
                 <slot name="for">FOR</slot>
               </span>
-              <slot name="input">INPUT</slot>
+              <div class="template-body">
-              <label data-attrs="for">
+                <slot name="inputElement">INPUT_ELEMENT</slot>
+                <label for="for">
                   <slot name="label">LABEL</slot>
                 </label>
                 <a href title="Обновить">[обновить]</a>
@@ -199,7 +204,76 @@
                 <a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</a>
               </div>
             </template>
-          <li>
+            <my-input slot="inputElement">
+              <template shadowrootmode="open">
+                <span class="template-inputs" hidden>
+                  <slot name="id">ID</slot>
+                  <slot name="value">VALUE</slot>
+                </span>
+                <slot name="input"></slot>
+              </template>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" id="id1" value="value1" />
+              <span slot="id">antizapret</span>
+              <span slot="value">antizapret</span>
+            </my-input>
+            <span slot="label">Антизапрет</span>
+          </pac-record>
+          <pac-record slot="pacRecords">
+            <template shadowrootmode="open">
+              <span class="template-inputs" hidden>
+                <slot name="id">ID</slot>
+                <slot name="value">VALUE</slot>
+                <slot name="for">FOR</slot>
+              </span>
+              <div class="template-body">
+                <slot name="inputElement">INPUT_ELEMENT</slot>
+                <label for="for">
+                  <slot name="label">LABEL</slot>
+                </label>
+                <a href title="Обновить">[обновить]</a>
+                <a href title="Приостановить">[⏸]</a>
+                <a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</a>
+              </div>
+            </template>
+            <my-input slot="inputElement">
+              <template shadowrootmode="open">
+                <span id="templateInputs" hidden>
+                  <slot name="id">ID</slot>
+                  <slot name="value">VALUE</slot>
+                </span>
+                <slot name="input"></slot>
+              </template>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" id="id2" value="value2" />
+              <span slot="id">anticensority</span>
+              <span slot="value">anticensority</span>
+            </my-input>
+            <span slot="label">Антицензорити</span>
+          </pac-record>
+            <!--script src="./repeat.mjs?times=2" type="module"></script-->
+            <!--Light DOM>
+            <div>
+              <span slot="label">Антизапрет</span>
+              <span slot="id">antizapret</span>
+              <span slot="value">antizapret</span>
+              <span slot="for">antizapret</span>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" data-attrs="id value" />
+            </div>
+            <div>
+              <span slot="label">Антицензорити</span>
+              <span slot="id">anticensority</span>
+              <span slot="value">anticensority</span>
+              <span slot="for">anticensority</span>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" data-attrs="id value" />
+            </div>
+            <!--
+            <div>
+              <my-input slot="input" name="first" />
+              <my-input slot="input" name="second" />
+            </div>
+            <!--/Light DOM>
+          </pac-record>
+          </template>
+          <!--li>
             <pac-record>
               <span slot="label">Антизапрет</span>
               <span slot="id">antizapret</span>
@@ -215,7 +289,8 @@
               <span slot="value">anticensority</span>
               <span slot="for">anticensority</span>
             </pac-record>
-          </li>
+          </li-->
+          </my-li>
           <li>
             <input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
             <label for="ownRadio">Свой:</label>

src/pages/options/index.mjs

@@ -1,5 +1,5 @@
 console.log('Options page is opening...');
-
+/*
 customElements.define('pac-record',
   class extends HTMLElement {
     static formAssociated = true;
@@ -18,10 +18,10 @@ customElements.define('pac-record',
         (da) => {
           da.dataset.attrs.split(' ').forEach(
             (attr) => {
-                console.log(shadow.querySelector(`#attributes > slot[name=${attr}]`));
+                console.log(shadow.querySelector(`#VARIABLES > slot[name=${attr}]`));
                 da.setAttribute(
                   attr,
-                  shadow.querySelector(`#attributes > slot[name=${attr}]`).assignedNodes()?.[0]?.textContent,
+                  shadow.querySelector(`#VARIABLES > slot[name=${attr}]`).assignedNodes()?.[0]?.textContent,
                 );
             },
           );
@@ -57,13 +57,14 @@ customElements.define('pac-record',
           })
       });
 
-      /*
+      /
       const input = fragment.querySelector('div > input');
       const label = fragment.querySelector('div > label');
       /*const node = pacRecordTemplate.content.cloneNode(true);
       const input = node.querySelector('div > input');
       const label = node.querySelector('div > label');
-      input.id = input.value = label.htmlFor = this.dataset.id;*/
+      input.id = input.value = label.htmlFor = this.dataset.id;
+      /
 
     }
     attributeChangedCallback(name, oldValue, newValue) {

src/pages/options/repeat.mjs

@@ -0,0 +1,12 @@
+console.log('HELLO FROM REPEATER');
+console.log('IMPORT META URL:', import.meta.url);
+const times = new URL(import.meta.url).searchParams.get("times");
+console.log(`REPEAT ${times} TIMES`);
+const htmlFile = window.location.pathname;
+console.log('HTML FILE IS:', htmlFile);
+console.log('DOCUMENT', document);
+console.log('DOC CURRENT SCRIPT:', document.currentScript);
+console.log('DOC.SCRIPTS', document.scripts);
+const thisScript = document.scripts[0];
+const scriptHost = thisScript.parentElement;
+console.log('SCRIPT HOST', scriptHost);