From 4f0691431ce817af438a289dd234ddb6286ac8ba Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 17 Feb 2022 23:34:41 +0300
Subject: [PATCH] auto-use fragment for multi-element templates

---
 js/localization.js | 16 ++++++++--------
 options.html       |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/js/localization.js b/js/localization.js
index 3777c40d..e99776c6 100644
--- a/js/localization.js
+++ b/js/localization.js
@@ -88,20 +88,20 @@ Object.assign(t, {
       text.replace(t.RX_WORD_BREAK, '$&\u00AD');
   },
 
-  createTemplate(node) {
-    const frag = 'fragment' in node.dataset;
-    const el = frag ? node.content : node.content.firstElementChild;
-    t.NodeList(frag ? el.querySelectorAll('*') : el);
-    t.template[node.dataset.id] = el;
-    // Compress inter-tag whitespace to reduce DOM tree and avoid space between elements without flex
+  createTemplate(el) {
+    const {content} = el;
     const toRemove = [];
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    // Compress inter-tag whitespace to reduce DOM tree and avoid space between elements without flex
+    const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
     for (let n; (n = walker.nextNode());) {
-      if (!/[\xA0\S]/.test(n.textContent)) { // allow \xA0 to keep &nbsp;
+      if (!/[\xA0\S]/.test(n.textContent) ||  // allowing \xA0 so as to preserve &nbsp;
+          n.nodeType === Node.COMMENT_NODE) {
         toRemove.push(n);
       }
     }
     toRemove.forEach(n => n.remove());
+    t.NodeList(content.querySelectorAll('*'));
+    t.template[el.dataset.id] = content.childNodes.length > 1 ? content : content.childNodes[0];
   },
 
   createText(str) {
diff --git a/options.html b/options.html
index 26830cb2..0ebedb35 100644
--- a/options.html
+++ b/options.html
@@ -20,7 +20,7 @@
   <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="options/options.css">
 
-  <template data-id="shortcutsFF" data-fragment>
+  <template data-id="shortcutsFF">
     <p style="line-height: 1.5" i18n-text="shortcutsNoteFF"></p>
     <table style="margin: 0 auto">
       <tr>