Changes for page CLB Search Component
Last modified by bougault on 2023/01/17 11:42
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -9,17 +9,18 @@ 9 9 this.attachShadow({ mode: 'open'}); 10 10 } 11 11 12 - createTemplate(htmlString) {12 + get template() { 13 13 const template = document.createElement('template'); 14 14 template.innerHTML = ` 15 15 <style> 16 16 ${this.styles} 17 17 </style> 18 - ${html String}18 + ${this.template} 19 19 `; 20 20 return template; 21 21 } 22 22 23 + 23 23 get styles() { 24 24 return ``; 25 25 } ... ... @@ -74,8 +74,8 @@ 74 74 } 75 75 76 76 77 - get searchInputTemplate() {78 - return this.createTemplate(`78 + get html() { 79 + return ` 79 79 <div> 80 80 <input type="text"><button id="search">Search</button> 81 81 <div id="results"></div> ... ... @@ -82,7 +82,7 @@ 82 82 <button id="prev">prev</button> 83 83 <button id="next">next</button> 84 84 </div> 85 - ` );86 + `; 86 86 } 87 87 88 88 renderResults = (results) => { ... ... @@ -99,7 +99,7 @@ 99 99 } 100 100 101 101 render() { 102 - this.shadowRoot.appendChild(this. searchInputTemplate.content.cloneNode(true));103 + this.shadowRoot.appendChild(this.template.content.cloneNode(true)); 103 103 } 104 104 } 105 105 ); ... ... @@ -125,20 +125,19 @@ 125 125 } 126 126 `; 127 127 } 128 - 129 - get resultTemplate() { 130 - return this.createTemplate(` 129 + get html() { 130 + return ` 131 131 <div> 132 132 <a href=${this.hrefAttr}>${this.titleAttr}</a> 133 133 <div> 134 134 <slot></slot> 135 135 </div> 136 - </div> 137 - `); 136 + </div> ` 138 138 } 138 + 139 139 connectedCallback() { 140 140 this.attachShadow({ mode: 'open' }); 141 - this.shadowRoot.appendChild(this. resultTemplate.content.cloneNode(true));141 + this.shadowRoot.appendChild(this.template.content.cloneNode(true)); 142 142 } 143 143 } 144 144 );