fix(engine-server): use standard shadowrootmode attribute (#3903)

* fix(engine-server): use standard shadowrootmode attribute

* test: fix polyfill in test

* test: fix test in safari

---------

Co-authored-by: James Tu <[email protected]>

Author: nolanlawson

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-aria-modify/expected.html

@@ -1,4 +1,4 @@
 <x-cmp aria-busy="true" aria-activedescendant="foo">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
   </template>
 </x-cmp>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-aria/expected.html

@@ -1,7 +1,7 @@
 <x-parent>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <x-child aria-activedescendant="foo" aria-atomic="foo" aria-autocomplete="foo" aria-busy="foo" aria-checked="foo" aria-colcount="foo" aria-colindex="foo" aria-colindextext="foo" aria-colspan="foo" aria-controls="foo" aria-current="foo" aria-describedby="foo" aria-description="foo" aria-details="foo" aria-disabled="foo" aria-errormessage="foo" aria-expanded="foo" aria-flowto="foo" aria-haspopup="foo" aria-hidden="foo" aria-invalid="foo" aria-keyshortcuts="foo" aria-label="foo" aria-labelledby="foo" aria-level="foo" aria-live="foo" aria-modal="foo" aria-multiline="foo" aria-multiselectable="foo" aria-orientation="foo" aria-owns="foo" aria-placeholder="foo" aria-posinset="foo" aria-pressed="foo" aria-readonly="foo" aria-relevant="foo" aria-required="foo" aria-roledescription="foo" aria-rowcount="foo" aria-rowindex="foo" aria-rowindextext="foo" aria-rowspan="foo" aria-selected="foo" aria-setsize="foo" aria-sort="foo" aria-valuemax="foo" aria-valuemin="foo" aria-valuenow="foo" aria-valuetext="foo" aria-braillelabel="foo" aria-brailleroledescription="foo" role="foo">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
       </template>
     </x-child>
     <div aria-activedescendant="foo" aria-atomic="foo" aria-autocomplete="foo" aria-busy="foo" aria-checked="foo" aria-colcount="foo" aria-colindex="foo" aria-colindextext="foo" aria-colspan="foo" aria-controls="foo" aria-current="foo" aria-describedby="foo" aria-description="foo" aria-details="foo" aria-disabled="foo" aria-errormessage="foo" aria-expanded="foo" aria-flowto="foo" aria-haspopup="foo" aria-hidden="foo" aria-invalid="foo" aria-keyshortcuts="foo" aria-label="foo" aria-labelledby="foo" aria-level="foo" aria-live="foo" aria-modal="foo" aria-multiline="foo" aria-multiselectable="foo" aria-orientation="foo" aria-owns="foo" aria-placeholder="foo" aria-posinset="foo" aria-pressed="foo" aria-readonly="foo" aria-relevant="foo" aria-required="foo" aria-roledescription="foo" aria-rowcount="foo" aria-rowindex="foo" aria-rowindextext="foo" aria-rowspan="foo" aria-selected="foo" aria-setsize="foo" aria-sort="foo" aria-valuemax="foo" aria-valuemin="foo" aria-valuenow="foo" aria-valuetext="foo" aria-braillelabel="foo" aria-brailleroledescription="foo" role="foo">

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-boolean>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <input type="checkbox" required readonly checked>
   </template>
 </x-attribute-boolean>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-aria/expected.html

@@ -1,7 +1,7 @@
 <x-attribute-component-aria>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <x-child role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
       </template>
     </x-child>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/expected.html

@@ -1,7 +1,7 @@
 <x-attribute-component-global-html>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <x-child class="foo bar" style="color: red; background: blue" data-test="test" accesskey="A" contenteditable="true" draggable="true" hidden id="foo" itemprop="foo" spellcheck="true" tabindex="-1">
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         Passthrough properties:
         <ul>
           <li>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-dynamic-escape>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <div data-attr="&quot;>
     </div>
     This 'should' be escaped

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-dynamic-with-scoped-css class="lwc-47oqt8q93b2-host">
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style class="lwc-47oqt8q93b2" type="text/css">
       div.lwc-47oqt8q93b2 {color: black;}div.kree.lwc-47oqt8q93b2 {color: blue;}
     </style>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-dynamic>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <div class="foo" style="color: red;" data-foo="foo">
     </div>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-global-html/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-global-html>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <div class="foo bar" style="color: red; background: blue" accesskey="A" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" lang="fr" spellcheck="true" tabindex="-1" title="foo">
     </div>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-live-bindings/expected.html

@@ -1,5 +1,5 @@
 <x-attribute-live-bindings>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <p>
       Checked: 
       <input type="checkbox" checked>