@brightspace-ui/core 1.220.2 → 1.220.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/html-block/html-block.js +22 -39
  2. package/package.json +1 -1
  3. package/components/html-block/demo/html-block-template.html +0 -634
package/components/html-block/html-block.js CHANGED
@@ -177,15 +177,11 @@ class HtmlBlock extends LitElement {
177
177
 
178
178
  if (!this._contentObserver || this.noDeferredRendering) return;
179
179
 
180
- const template = this._findSlottedElement('TEMPLATE');
181
- if (template) this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
182
- else {
183
- const slot = this.shadowRoot.querySelector('slot');
184
- if (slot) {
185
- slot.assignedNodes({ flatten: true }).forEach(
186
- node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
187
- );
188
- }
180
+ const slot = this.shadowRoot.querySelector('slot');
181
+ if (slot) {
182
+ slot.assignedNodes({ flatten: true }).forEach(
183
+ node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
184
+ );
189
185
  }
190
186
  }
191
187
 
@@ -220,13 +216,6 @@ class HtmlBlock extends LitElement {
220
216
  return false;
221
217
  }
222
218
 
223
- _findSlottedElement(tagName, slot) {
224
- if (!this.shadowRoot) return;
225
- if (!slot) slot = this.shadowRoot.querySelector('slot');
226
- return slot.assignedNodes({ flatten: true })
227
- .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
228
- }
229
-
230
219
  async _processRenderers(elem) {
231
220
  for (const renderer of getRenderers()) {
232
221
  if (this._contextObserverController && renderer.contextAttributes) {
@@ -252,26 +241,23 @@ class HtmlBlock extends LitElement {
252
241
  }
253
242
 
254
243
  async _renderInline(slot) {
255
- const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
244
+ if (!this.shadowRoot) return;
245
+ if (!slot) slot = this.shadowRoot.querySelector('slot');
246
+
247
+ const noDeferredRenderingContainer = slot.assignedNodes({ flatten: true })
248
+ .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
249
+
256
250
  if (!noDeferredRenderingContainer) return;
257
251
  await this._processRenderers(noDeferredRenderingContainer);
258
252
  }
259
253
 
260
254
  _stamp(slot) {
261
- const stampHTML = async template => {
262
- let fragment;
263
- if (template) fragment = document.importNode(template.content, true);
264
- else {
265
- fragment = document.createDocumentFragment();
266
- this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true })
267
- .forEach(node => fragment.appendChild(node.cloneNode(true)));
268
- }
269
-
270
- if (fragment.hasChildNodes()) {
255
+ const stampHTML = async nodes => {
256
+ if (nodes && nodes.length > 0) {
271
257
 
272
258
  let temp = document.createElement('div');
273
259
  temp.style.display = 'none';
274
- temp.appendChild(fragment);
260
+ nodes.forEach(node => temp.appendChild(node.cloneNode(true)));
275
261
 
276
262
  this._renderContainer.appendChild(temp);
277
263
  temp = await this._processRenderers(temp);
@@ -284,18 +270,15 @@ class HtmlBlock extends LitElement {
284
270
 
285
271
  if (this._contentObserver) this._contentObserver.disconnect();
286
272
 
287
- const template = this._findSlottedElement('TEMPLATE', slot);
288
- if (template) {
289
- this._contentObserver = new MutationObserver(() => stampHTML(template));
290
- this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
291
- } else {
292
- this._contentObserver = new MutationObserver(() => stampHTML());
293
- this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).forEach(
294
- node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
295
- );
296
- }
273
+ if (!slot) slot = this.shadowRoot.querySelector('slot');
274
+ const slottedNodes = slot.assignedNodes({ flatten: true });
275
+
276
+ this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
277
+ slottedNodes.forEach(
278
+ node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
279
+ );
297
280
 
298
- stampHTML(template);
281
+ stampHTML(slottedNodes);
299
282
  }
300
283
 
301
284
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.220.2",
3
+ "version": "1.220.3",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",
package/components/html-block/demo/html-block-template.html DELETED
@@ -1,634 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../html-block.js';
10
- import { provideInstance } from '../../../mixins/provider-mixin.js';
11
-
12
- class DemoReplacementRenderer {
13
- get canRenderInline() {
14
- return true;
15
- }
16
-
17
- async render(elem) {
18
- const elemsToReplace = elem.querySelectorAll('[data-replace-me-id]');
19
- if (elemsToReplace.length === 0) return elem;
20
-
21
- elemsToReplace.forEach(elemToReplace => {
22
-
23
- const someId = elemToReplace.getAttribute('data-replace-me-id');
24
- if (!someId) return;
25
-
26
- const anchor = document.createElement('a');
27
- anchor.href = `/d2l/lp/some-route?someId=${parseInt(someId)}`;
28
- anchor.target = '_blank';
29
- anchor.innerText = elemToReplace.innerText;
30
-
31
- elemToReplace.innerText = '';
32
- elemToReplace.appendChild(anchor);
33
-
34
- });
35
-
36
- return elem;
37
- }
38
- }
39
-
40
- // demo replacement renderer for html-block
41
- provideInstance(document, 'html-block-renderers', [ new DemoReplacementRenderer() ]);
42
-
43
- </script>
44
- <script>
45
- document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ outputScale: 1.1, renderLatex: window.location.search.indexOf('latex=true') !== -1 });
46
- </script>
47
- </head>
48
- <body unresolved>
49
-
50
- <d2l-demo-page page-title="d2l-html-block - templates">
51
-
52
- <h2>HTML Block</h2>
53
-
54
- <d2l-demo-snippet>
55
- <template>
56
- <d2l-html-block>
57
- <template>
58
- <h1>heading 1</h1>
59
- <h2>heading 2</h2>
60
- <h3>heading 3</h3>
61
- <h4>heading 4</h4>
62
- <h5>heading 5</h5>
63
- <h6>heading 6</h6>
64
- <div><strong>strong</strong></div>
65
- <div><b>bold</b></div>
66
- <div>text</div>
67
- <pre>preformatted</pre>
68
- <p>paragraph</p>
69
- <ul>
70
- <li>unordered item 1</li>
71
- <li>unordered item 2</li>
72
- </ul>
73
- <ol>
74
- <li>ordered item 1</li>
75
- <li>ordered item 2</li>
76
- </ol>
77
- <div><a href="https://d2l.com">anchor</a></div>
78
- </template>
79
- </d2l-html-block>
80
- </template>
81
- </d2l-demo-snippet>
82
-
83
- <h2>HTML Block (compact)</h2>
84
-
85
- <d2l-demo-snippet>
86
- <template>
87
- <d2l-html-block compact>
88
- <template>
89
- <h1>heading 1</h1>
90
- <h2>heading 2</h2>
91
- <h3>heading 3</h3>
92
- <h4>heading 4</h4>
93
- <h5>heading 5</h5>
94
- <h6>heading 6</h6>
95
- <div><strong>strong</strong></div>
96
- <div><b>bold</b></div>
97
- <div>text</div>
98
- <pre>preformatted</pre>
99
- <p>paragraph</p>
100
- <ul>
101
- <li>unordered item 1</li>
102
- <li>unordered item 2</li>
103
- </ul>
104
- <ol>
105
- <li>ordered item 1</li>
106
- <li>ordered item 2</li>
107
- </ol>
108
- <div><a href="https://d2l.com">anchor</a></div>
109
- </template>
110
- </d2l-html-block>
111
- </template>
112
- </d2l-demo-snippet>
113
-
114
- <h2>HTML Block (math)</h2>
115
-
116
- <d2l-demo-snippet>
117
- <template>
118
- <d2l-html-block>
119
- <template>
120
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
121
- <mi>x</mi>
122
- <mo>=</mo>
123
- <mrow>
124
- <mfrac>
125
- <mrow>
126
- <mo>&#x2212;</mo>
127
- <mi>b</mi>
128
- <mo>&#xB1;</mo>
129
- <msqrt>
130
- <msup>
131
- <mi>b</mi>
132
- <mn>2</mn>
133
- </msup>
134
- <mo>&#x2212;</mo>
135
- <mn>4</mn>
136
- <mi>a</mi>
137
- <mi>c</mi>
138
- </msqrt>
139
- </mrow>
140
- <mrow>
141
- <mn>2</mn>
142
- <mi>a</mi>
143
- </mrow>
144
- </mfrac>
145
- </mrow>
146
- <mtext>.</mtext>
147
- </math>
148
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
149
- <msup>
150
- <mrow>
151
- <mo>(</mo>
152
- <mrow>
153
- <munderover>
154
- <mo>∑<!-- ∑ --></mo>
155
- <mrow class="MJX-TeXAtom-ORD">
156
- <mi>k</mi>
157
- <mo>=</mo>
158
- <mn>1</mn>
159
- </mrow>
160
- <mi>n</mi>
161
- </munderover>
162
- <msub>
163
- <mi>a</mi>
164
- <mi>k</mi>
165
- </msub>
166
- <msub>
167
- <mi>b</mi>
168
- <mi>k</mi>
169
- </msub>
170
- </mrow>
171
- <mo>)</mo>
172
- </mrow>
173
- <mrow class="MJX-TeXAtom-ORD">
174
- <mspace width="negativethinmathspace"></mspace>
175
- <mspace width="negativethinmathspace"></mspace>
176
- <mn>2</mn>
177
- </mrow>
178
- </msup>
179
- <mo>≤<!-- ≤ --></mo>
180
- <mrow>
181
- <mo>(</mo>
182
- <mrow>
183
- <munderover>
184
- <mo>∑<!-- ∑ --></mo>
185
- <mrow class="MJX-TeXAtom-ORD">
186
- <mi>k</mi>
187
- <mo>=</mo>
188
- <mn>1</mn>
189
- </mrow>
190
- <mi>n</mi>
191
- </munderover>
192
- <msubsup>
193
- <mi>a</mi>
194
- <mi>k</mi>
195
- <mn>2</mn>
196
- </msubsup>
197
- </mrow>
198
- <mo>)</mo>
199
- </mrow>
200
- <mrow>
201
- <mo>(</mo>
202
- <mrow>
203
- <munderover>
204
- <mo>∑<!-- ∑ --></mo>
205
- <mrow class="MJX-TeXAtom-ORD">
206
- <mi>k</mi>
207
- <mo>=</mo>
208
- <mn>1</mn>
209
- </mrow>
210
- <mi>n</mi>
211
- </munderover>
212
- <msubsup>
213
- <mi>b</mi>
214
- <mi>k</mi>
215
- <mn>2</mn>
216
- </msubsup>
217
- </mrow>
218
- <mo>)</mo>
219
- </mrow>
220
- </math>
221
- </template>
222
- </d2l-html-block>
223
- </template>
224
- </d2l-demo-snippet>
225
-
226
- <h2>HTML Block (math, no deferred rendering)</h2>
227
-
228
- <d2l-demo-snippet>
229
- <template>
230
- <d2l-html-block no-deferred-rendering>
231
- <div>
232
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
233
- <mi>x</mi>
234
- <mo>=</mo>
235
- <mrow>
236
- <mfrac>
237
- <mrow>
238
- <mo>&#x2212;</mo>
239
- <mi>b</mi>
240
- <mo>&#xB1;</mo>
241
- <msqrt>
242
- <msup>
243
- <mi>b</mi>
244
- <mn>2</mn>
245
- </msup>
246
- <mo>&#x2212;</mo>
247
- <mn>4</mn>
248
- <mi>a</mi>
249
- <mi>c</mi>
250
- </msqrt>
251
- </mrow>
252
- <mrow>
253
- <mn>2</mn>
254
- <mi>a</mi>
255
- </mrow>
256
- </mfrac>
257
- </mrow>
258
- <mtext>.</mtext>
259
- </math>
260
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
261
- <msup>
262
- <mrow>
263
- <mo>(</mo>
264
- <mrow>
265
- <munderover>
266
- <mo>∑<!-- ∑ --></mo>
267
- <mrow class="MJX-TeXAtom-ORD">
268
- <mi>k</mi>
269
- <mo>=</mo>
270
- <mn>1</mn>
271
- </mrow>
272
- <mi>n</mi>
273
- </munderover>
274
- <msub>
275
- <mi>a</mi>
276
- <mi>k</mi>
277
- </msub>
278
- <msub>
279
- <mi>b</mi>
280
- <mi>k</mi>
281
- </msub>
282
- </mrow>
283
- <mo>)</mo>
284
- </mrow>
285
- <mrow class="MJX-TeXAtom-ORD">
286
- <mspace width="negativethinmathspace"></mspace>
287
- <mspace width="negativethinmathspace"></mspace>
288
- <mn>2</mn>
289
- </mrow>
290
- </msup>
291
- <mo>≤<!-- ≤ --></mo>
292
- <mrow>
293
- <mo>(</mo>
294
- <mrow>
295
- <munderover>
296
- <mo>∑<!-- ∑ --></mo>
297
- <mrow class="MJX-TeXAtom-ORD">
298
- <mi>k</mi>
299
- <mo>=</mo>
300
- <mn>1</mn>
301
- </mrow>
302
- <mi>n</mi>
303
- </munderover>
304
- <msubsup>
305
- <mi>a</mi>
306
- <mi>k</mi>
307
- <mn>2</mn>
308
- </msubsup>
309
- </mrow>
310
- <mo>)</mo>
311
- </mrow>
312
- <mrow>
313
- <mo>(</mo>
314
- <mrow>
315
- <munderover>
316
- <mo>∑<!-- ∑ --></mo>
317
- <mrow class="MJX-TeXAtom-ORD">
318
- <mi>k</mi>
319
- <mo>=</mo>
320
- <mn>1</mn>
321
- </mrow>
322
- <mi>n</mi>
323
- </munderover>
324
- <msubsup>
325
- <mi>b</mi>
326
- <mi>k</mi>
327
- <mn>2</mn>
328
- </msubsup>
329
- </mrow>
330
- <mo>)</mo>
331
- </mrow>
332
- </math>
333
- <p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
334
- </div>
335
- </d2l-html-block>
336
- </template>
337
- </d2l-demo-snippet>
338
-
339
- <h2>HTML Block (inline math)</h2>
340
-
341
- <d2l-demo-snippet>
342
- <template>
343
- <d2l-html-block>
344
- <template>
345
- <div>An equation...
346
- <math xmlns="http://www.w3.org/1998/Math/MathML">
347
- <msqrt>
348
- <mn>3</mn>
349
- <mi>x</mi>
350
- <mo>&#x2212;</mo>
351
- <mn>1</mn>
352
- </msqrt>
353
- <mo>+</mo>
354
- <mo stretchy="false">(</mo>
355
- <mn>1</mn>
356
- <mo>+</mo>
357
- <mi>x</mi>
358
- <msup>
359
- <mo stretchy="false">)</mo>
360
- <mn>2</mn>
361
- </msup>
362
- </math> embedded inline with text... and showing placement of indicies for summations
363
- <math xmlns="http://www.w3.org/1998/Math/MathML">
364
- <msup>
365
- <mrow>
366
- <mo>(</mo>
367
- <mrow>
368
- <munderover>
369
- <mo>∑<!-- ∑ --></mo>
370
- <mrow class="MJX-TeXAtom-ORD">
371
- <mi>k</mi>
372
- <mo>=</mo>
373
- <mn>1</mn>
374
- </mrow>
375
- <mi>n</mi>
376
- </munderover>
377
- <msub>
378
- <mi>a</mi>
379
- <mi>k</mi>
380
- </msub>
381
- <msub>
382
- <mi>b</mi>
383
- <mi>k</mi>
384
- </msub>
385
- </mrow>
386
- <mo>)</mo>
387
- </mrow>
388
- <mrow class="MJX-TeXAtom-ORD">
389
- <mspace width="negativethinmathspace"></mspace>
390
- <mspace width="negativethinmathspace"></mspace>
391
- <mn>2</mn>
392
- </mrow>
393
- </msup>
394
- <mo>≤<!-- ≤ --></mo>
395
- <mrow>
396
- <mo>(</mo>
397
- <mrow>
398
- <munderover>
399
- <mo>∑<!-- ∑ --></mo>
400
- <mrow class="MJX-TeXAtom-ORD">
401
- <mi>k</mi>
402
- <mo>=</mo>
403
- <mn>1</mn>
404
- </mrow>
405
- <mi>n</mi>
406
- </munderover>
407
- <msubsup>
408
- <mi>a</mi>
409
- <mi>k</mi>
410
- <mn>2</mn>
411
- </msubsup>
412
- </mrow>
413
- <mo>)</mo>
414
- </mrow>
415
- <mrow>
416
- <mo>(</mo>
417
- <mrow>
418
- <munderover>
419
- <mo>∑<!-- ∑ --></mo>
420
- <mrow class="MJX-TeXAtom-ORD">
421
- <mi>k</mi>
422
- <mo>=</mo>
423
- <mn>1</mn>
424
- </mrow>
425
- <mi>n</mi>
426
- </munderover>
427
- <msubsup>
428
- <mi>b</mi>
429
- <mi>k</mi>
430
- <mn>2</mn>
431
- </msubsup>
432
- </mrow>
433
- <mo>)</mo>
434
- </mrow>
435
- </math> and other symbols.
436
- </div>
437
- </template>
438
- </d2l-html-block>
439
- </template>
440
- </d2l-demo-snippet>
441
-
442
- <h2>HTML Block (LaTeX math)</h2>
443
-
444
- <d2l-demo-snippet>
445
- <template>
446
- <d2l-html-block>
447
- <template>
448
- <div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
449
- </template>
450
- </d2l-html-block>
451
- </template>
452
- </d2l-demo-snippet>
453
-
454
- <h2>HTML Block (LaTeX inline math)</h2>
455
-
456
- <d2l-demo-snippet>
457
- <template>
458
- <d2l-html-block>
459
- <template>
460
- <div>An equation rendered using LaTeX...
461
- \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
462
- ... and some text!
463
- </div>
464
- </template>
465
- </d2l-html-block>
466
- </template>
467
- </d2l-demo-snippet>
468
-
469
- <h2>HTML Block (wrapped)</h2>
470
-
471
- <d2l-demo-snippet>
472
- <template>
473
- <d2l-some-component></d2l-some-component>
474
- </template>
475
- </d2l-demo-snippet>
476
-
477
- <d2l-code-view language="javascript">
478
- import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
479
- import { html, LitElement } from 'lit-element/lit-element.js';
480
-
481
- class SomeComponent extends LitElement {
482
-
483
- render() {
484
- return html`
485
- &lt;d2l-html-block&gt;
486
- &lt;template&gt;${unsafeHTML(this._someHTML)}&lt;/template&gt;
487
- &lt;/d2l-html-block&gt;
488
- &lt;button ...&gt;update content&lt;/button&gt;`;
489
- `;
490
- }
491
- }
492
-
493
- customElements.define('d2l-some-component', SomeComponent);
494
- </d2l-code-view>
495
-
496
- </d2l-demo-page>
497
-
498
- <script type="module">
499
- import { html, LitElement } from 'lit-element/lit-element.js';
500
- import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
501
-
502
- class SomeComponent extends LitElement {
503
-
504
- static get properties() {
505
- return {
506
- _htmlSnippets: { type: Array },
507
- _updateCount: { type: Number }
508
- };
509
- }
510
-
511
- constructor() {
512
- super();
513
- this._htmlSnippets = [
514
- `<div>An equation...
515
- <math xmlns="http://www.w3.org/1998/Math/MathML">
516
- <msqrt>
517
- <mn>3</mn>
518
- <mi>x</mi>
519
- <mo>&#x2212;</mo>
520
- <mn>1</mn>
521
- </msqrt>
522
- <mo>+</mo>
523
- <mo stretchy="false">(</mo>
524
- <mn>1</mn>
525
- <mo>+</mo>
526
- <mi>x</mi>
527
- <msup>
528
- <mo stretchy="false">)</mo>
529
- <mn>2</mn>
530
- </msup>
531
- </math> embedded inline with text... and showing placement of indicies for summations
532
- <math xmlns="http://www.w3.org/1998/Math/MathML">
533
- <msup>
534
- <mrow>
535
- <mo>(</mo>
536
- <mrow>
537
- <munderover>
538
- <mo>∑<!-- ∑ --></mo>
539
- <mrow class="MJX-TeXAtom-ORD">
540
- <mi>k</mi>
541
- <mo>=</mo>
542
- <mn>1</mn>
543
- </mrow>
544
- <mi>n</mi>
545
- </munderover>
546
- <msub>
547
- <mi>a</mi>
548
- <mi>k</mi>
549
- </msub>
550
- <msub>
551
- <mi>b</mi>
552
- <mi>k</mi>
553
- </msub>
554
- </mrow>
555
- <mo>)</mo>
556
- </mrow>
557
- <mrow class="MJX-TeXAtom-ORD">
558
- <mspace width="negativethinmathspace"></mspace>
559
- <mspace width="negativethinmathspace"></mspace>
560
- <mn>2</mn>
561
- </mrow>
562
- </msup>
563
- <mo>≤<!-- ≤ --></mo>
564
- <mrow>
565
- <mo>(</mo>
566
- <mrow>
567
- <munderover>
568
- <mo>∑<!-- ∑ --></mo>
569
- <mrow class="MJX-TeXAtom-ORD">
570
- <mi>k</mi>
571
- <mo>=</mo>
572
- <mn>1</mn>
573
- </mrow>
574
- <mi>n</mi>
575
- </munderover>
576
- <msubsup>
577
- <mi>a</mi>
578
- <mi>k</mi>
579
- <mn>2</mn>
580
- </msubsup>
581
- </mrow>
582
- <mo>)</mo>
583
- </mrow>
584
- <mrow>
585
- <mo>(</mo>
586
- <mrow>
587
- <munderover>
588
- <mo>∑<!-- ∑ --></mo>
589
- <mrow class="MJX-TeXAtom-ORD">
590
- <mi>k</mi>
591
- <mo>=</mo>
592
- <mn>1</mn>
593
- </mrow>
594
- <mi>n</mi>
595
- </munderover>
596
- <msubsup>
597
- <mi>b</mi>
598
- <mi>k</mi>
599
- <mn>2</mn>
600
- </msubsup>
601
- </mrow>
602
- <mo>)</mo>
603
- </mrow>
604
- </math> and other symbols.
605
- </div>`,
606
- 'The wizard quickly jinxed the gnomes before they vaporized.',
607
- 'The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.',
608
- 'A quick movement of the enemy will jeopardize six gunboats.',
609
- 'Grumpy wizards make a toxic brew for the jovial queen.',
610
- 'Painful zombies quickly watch a jinxed graveyard.',
611
- 'Jackie will budget for the most expensive zoology equipment.',
612
- 'No more updates for you.'
613
- ];
614
- this._updateCount = 0;
615
- }
616
-
617
- render() {
618
- return html`
619
- <d2l-html-block>
620
- <template>${unsafeHTML(this._htmlSnippets[this._updateCount])}</template>
621
- </d2l-html-block>
622
- <button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
623
- }
624
-
625
- _updateTemplateContent() {
626
- if (this._updateCount < 6) this._updateCount += 1;
627
- }
628
-
629
- }
630
- customElements.define('d2l-some-component', SomeComponent);
631
- </script>
632
-
633
- </body>
634
- </html>