[web] Don't leave emtpy style attribute if nothing as applied

web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt

@@ -80,8 +80,7 @@ class DomNodeWrapper(val node: Node) {
 
     fun updateStyleDeclarations(style: StyleHolder?) {
         val htmlElement = node as? HTMLElement ?: return
-        // TODO: typed-om-polyfill hasn't StylePropertyMap::clear()
-        htmlElement.style.cssText = ""
+        htmlElement.removeAttribute("style")
 
         style?.properties?.forEach { (name, value) ->
             setProperty(htmlElement.attributeStyleMap, name, value)

web/core/src/jsTest/kotlin/DomSideEffectTests.kt

@@ -29,7 +29,7 @@ class DomSideEffectTests {
             }
         }
         assertEquals(
-            expected = "<div><div style=\"\"><p>Hello World!</p></div></div>",
+            expected = "<div><div><p>Hello World!</p></div></div>",
             actual = root.outerHTML
         )
     }
@@ -57,7 +57,7 @@ class DomSideEffectTests {
         composition { CustomDiv(i) }
 
         assertEquals(
-            expected = "<div><div style=\"\">Value = 0</div></div>",
+            expected = "<div><div>Value = 0</div></div>",
             actual = root.outerHTML
         )
 
@@ -75,7 +75,7 @@ class DomSideEffectTests {
             message = "onDispose should be called with a previous value"
         )
         assertEquals(
-            expected = "<div><div style=\"\">Value = 1</div></div>",
+            expected = "<div><div>Value = 1</div></div>",
             actual = root.outerHTML
         )
     }
@@ -97,7 +97,7 @@ class DomSideEffectTests {
         }
 
         assertEquals(
-            expected = "<div><div style=\"\">Goedemorgen!</div></div>",
+            expected = "<div><div>Goedemorgen!</div></div>",
             actual = root.outerHTML
         )
 

web/core/src/jsTest/kotlin/InlineStyleTests.kt

@@ -67,7 +67,7 @@ class InlineStyleTests {
         }
 
         assertEquals(
-            expected = "<span style=\"\">text</span>",
+            expected = "<span>text</span>",
             actual = root.innerHTML
         )
 
@@ -106,7 +106,7 @@ class InlineStyleTests {
         waitChanges()
 
         assertEquals(
-            expected = "<span style=\"\">text</span>",
+            expected = "<span>text</span>",
             actual = root.innerHTML
         )
     }
@@ -140,7 +140,7 @@ class InlineStyleTests {
             val expected = if (isRed) {
                 "<span style=\"color: red;\">text</span>"
             } else {
-                "<span style=\"\">text</span>"
+                "<span>text</span>"
             }
             assertEquals(
                 expected = expected,

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -25,7 +25,7 @@ class AttributesTests {
         }
 
         assertEquals(
-            expected = "<label for=\"l1\" style=\"\">label</label>",
+            expected = "<label for=\"l1\">label</label>",
             actual = root.innerHTML
         )
     }
@@ -38,7 +38,7 @@ class AttributesTests {
         }
 
         assertEquals(
-            expected = "<label style=\"\">label</label>",
+            expected = "<label>label</label>",
             actual = root.innerHTML
         )
     }
@@ -57,7 +57,7 @@ class AttributesTests {
         }
 
         assertEquals(
-            expected = "<label for=\"lb1\" style=\"\">label</label>",
+            expected = "<label for=\"lb1\">label</label>",
             actual = root.innerHTML
         )
     }

web/core/src/jsTest/kotlin/elements/TableTests.kt

@@ -137,45 +137,45 @@ class TableTests {
 
         assertEquals(
             expected = """
-            <table style="">
-                <caption style="">CaptionText</caption>
-                <colgroup style="">
-                    <col style="">
-                    <col style="">
-                    <col style="">
+            <table>
+                <caption>CaptionText</caption>
+                <colgroup>
+                    <col>
+                    <col>
+                    <col>
                 </colgroup>
-                <thead style="">
-                    <tr style="">
-                        <th style=""></th>
-                        <th style=""></th>
-                        <th colspan="2" style="">First</th>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                        <th colspan="2">First</th>
                     </tr>
-                    <tr style="">
-                        <th style=""></th>
-                        <th style=""></th>
-                        <th scope="col" style="">A</th>
-                        <th scope="col" style="">B</th>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                        <th scope="col">A</th>
+                        <th scope="col">B</th>
                     </tr>
                 </thead>
-                <tbody style="">
-                    <tr style="">
-                        <th scope="row" rowspan="2" style="">Rows</th>
-                        <th scope="row" style="">1</th>
-                        <td style="">30</td>
-                        <td style="">40</td>
+                <tbody>
+                    <tr>
+                        <th scope="row" rowspan="2">Rows</th>
+                        <th scope="row">1</th>
+                        <td>30</td>
+                        <td>40</td>
                     </tr>
-                    <tr style="">
-                        <th scope="row" style="">2</th>
-                        <td style="">10</td>
-                        <td style="">20</td>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>10</td>
+                        <td>20</td>
                     </tr>
                 </tbody>
-                <tfoot style="">
-                    <tr style="">
-                        <th scope="row" style="">Totals</th>
-                        <th style=""></th>
-                        <td style="">40</td>
-                        <td style="">60</td>
+                <tfoot>
+                    <tr>
+                        <th scope="row">Totals</th>
+                        <th></th>
+                        <td>40</td>
+                        <td>60</td>
                     </tr>
                 </tfoot>
             </table>