Smarter tag getter for my-heading

Author: augustjk

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js

@@ -8,21 +8,11 @@ export class MyHeading extends LitElement {
   _levelContext = new ContextConsumer(this, {context: levelContext});
 
   get _tag() {
-    switch (this._levelContext.value?.level) {
-      case 0:
-        return literal`h1`;
-      case 1:
-        return literal`h2`;
-      case 2:
-        return literal`h3`;
-      case 3:
-        return literal`h4`;
-      case 4:
-        return literal`h5`;
-      case 5:
-        return literal`h6`;
-      default:
-        return literal`p`;
+    const level = this._levelContext.value?.level;
+    if (typeof level === 'number' && level >= 0 && level <= 5) {
+      return unsafeStatic(`h${level}`);
+    } else {
+      return literal`p`;
     }
   }
 

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.ts

@@ -1,5 +1,5 @@
 import {LitElement} from 'lit';
-import {html, literal} from 'lit/static-html.js';
+import {html, literal, unsafeStatic} from 'lit/static-html.js';
 import {customElement} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import {consume} from '@lit/context';
@@ -12,21 +12,11 @@ export class MyHeading extends LitElement {
   private _level?: Level;
 
   private get _tag() {
-    switch (this._level?.level) {
-      case 0:
-        return literal`h1`;
-      case 1:
-        return literal`h2`;
-      case 2:
-        return literal`h3`;
-      case 3:
-        return literal`h4`;
-      case 4:
-        return literal`h5`;
-      case 5:
-        return literal`h6`;
-      default:
-        return literal`p`;
+    const level = this._level?.level;
+    if (typeof level === 'number' && level >= 0 && level <= 5) {
+      return unsafeStatic(`h${level}`);
+    } else {
+      return literal`p`;
     }
   }