feat(fragment) - inherit section dataset

blocks/fragment/fragment.js

@@ -38,7 +38,13 @@ export default async function decorate(block) {
   if (fragment) {
     const fragmentSection = fragment.querySelector(':scope .section');
     if (fragmentSection) {
-      block.closest('.section').classList.add(...fragmentSection.classList);
+      const mainSection = block.closest('.section');
+      mainSection.classList.add(...fragmentSection.classList);
+      // in case of conflicts, the destination section's dataset wins
+      const mergedDataset = { ...fragmentSection.dataset, ...mainSection.dataset };
+      Object.keys(mergedDataset).forEach((key) => {
+        mainSection.dataset[key] = mergedDataset[key];
+      });
       block.closest('.fragment-wrapper').replaceWith(...fragmentSection.childNodes);
     }
   }

test/blocks/fragment/fragment.test.js

@@ -22,6 +22,8 @@ describe('Fragment block', () => {
     await sectionLoaded(section);
     expect(section.textContent.trim()).to.equal('Hello world!');
     expect(section.classList.contains('example-container')).to.be.true;
+    expect(section.classList.contains('example-style')).to.be.true;
+    expect(section.dataset.exampleData).to.equals('Example Value');
     expect(document.querySelectorAll('.fragment').length).to.equal(1);
   });
 });

test/blocks/fragment/test.plain.html

@@ -11,4 +11,14 @@
             </div>
         </div>
     </div>
+    <div class="section-metadata">
+        <div>
+          <div>Style</div>
+          <div>Example Style</div>
+        </div>
+        <div>
+          <div>Example Data</div>
+          <div>Example Value</div>
+        </div>
+    </div>
 </div>