Bug 1949259 - Enforce valid HTML in HTML for Lit templates r=frontend-codestyle-reviewers,mtigley,credential-management-reviewers,fxview-reviewers,sidebar-reviewers,mossop

Differential Revision: https://phabricator.services.mozilla.com/D245591

.eslintrc.js

@@ -69,6 +69,7 @@ module.exports = {
   plugins: ["mozilla", "html", "import", "json", "promise", "lit"],
   rules: {
     "lit/quoted-expressions": ["error", "never"],
+    "lit/no-invalid-html": "error",
   },
   overrides: [
     {

browser/components/aboutlogins/content/components/login-timeline.mjs

@@ -54,7 +54,7 @@ export default class Timeline extends MozLitElement {
           style=${styles}
           class="action"
           data-l10n-id=${entry.actionId}
-        </div>
+        ></div>
       `;
     });
 

browser/components/firefoxview/fxview-empty-state.mjs

@@ -52,11 +52,11 @@ class FxviewEmptyState extends MozLitElement {
     if (!descriptionLink) {
       return html``;
     }
-    return html` <a
+    return html`<a
       data-l10n-name=${descriptionLink.name}
       href=${descriptionLink.url}
       target=${descriptionLink?.sameTarget ? "_self" : "_blank"}
-    />`;
+    ></a>`;
   }
 
   render() {

browser/components/shopping/content/settings.mjs

@@ -77,15 +77,19 @@ class ShoppingSettings extends MozLitElement {
     let canShowRecommendationToggle = this.adsEnabled;
 
     let adsToggleMarkup = canShowRecommendationToggle
-      ? html`
+      ? html` <div class="shopping-settings-toggle-option-wrapper">
-        <div class="shopping-settings-toggle-option-wrapper">
           <moz-toggle
             id="shopping-settings-recommendations-toggle"
             ?pressed=${this.adsEnabledByUser}
             data-l10n-id="shopping-settings-recommendations-toggle2"
             data-l10n-attrs="label"
-            @toggle=${this.onToggleRecommendations}>
+            @toggle=${this.onToggleRecommendations}
-            <span id="shopping-ads-learn-more" data-l10n-id="shopping-settings-recommendations-learn-more3" slot="description">
+          >
+            <span
+              id="shopping-ads-learn-more"
+              data-l10n-id="shopping-settings-recommendations-learn-more3"
+              slot="description"
+            >
               <a
                 id="shopping-ads-learn-more-link"
                 target="_blank"
@@ -95,7 +99,7 @@ class ShoppingSettings extends MozLitElement {
                 data-l10n-name="review-quality-url"
               ></a>
             </span>
-          </moz-toggle/>
+          </moz-toggle>
         </div>`
       : null;
 

browser/components/shopping/content/shopping-card.mjs

@@ -69,7 +69,7 @@ class ShoppingCard extends MozLitElement {
         <span id="heading">${this.label}</span>
         <moz-five-star
           rating=${this.rating === 0 ? 0.5 : this.rating}
-        </moz-five-star>
+        ></moz-five-star>
       </div>`;
     }
     return "";

browser/components/sidebar/sidebar-customize.mjs

@@ -181,7 +181,7 @@ export class SidebarCustomize extends SidebarPage {
         data-l10n-id=${this.getInputL10nId(tool.view)}
         @change=${this.onToggleToolInput}
         ?checked=${!tool.disabled}
-      />
+      ></moz-checkbox>
     `;
   }
 
@@ -282,7 +282,7 @@ export class SidebarCustomize extends SidebarPage {
                     ?checked=${this.getWindow().SidebarController._state
                       .revampVisibility === "expand-on-hover"}
                     ?disabled=${this.visibility == "hide-sidebar"}
-                  />
+                  ></moz-checkbox>
                 `
               )}
               <moz-checkbox

browser/components/sidebar/sidebar-syncedtabs.mjs

@@ -179,7 +179,7 @@ class SyncedTabsInSidebar extends SidebarPage {
         .searchQuery=${this.controller.searchQuery}
         @fxview-tab-list-primary-action=${navigateToLink}
         @fxview-tab-list-secondary-action=${this.onSecondaryAction}
-      />
+      ></sidebar-tab-list>
     </moz-card>`;
   }