| ... |
... |
@@ -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 |
|
- ${htmlString} |
|
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 |
); |