web: reuse attrsScope instance per Element instance

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt

@@ -135,6 +135,15 @@ open class AttrsScopeBuilder<TElement : Element>(
     internal var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)? = null
     internal val classes: MutableList<String> = mutableListOf()
 
+    internal fun clear() {
+        eventsListenerScopeBuilder.clear()
+        attributesMap.clear()
+        styleScope.clear()
+        propertyUpdates.clear()
+        refEffect = null
+        classes.clear()
+    }
+
     /**
      * [classes] adds all values passed as params to the element's classList.
      *  This method acts cumulatively, that is, each call adds values to the classList.

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerScope.kt

@@ -280,4 +280,8 @@ open class EventsListenerScopeBuilder : EventsListenerScope {
     }
 
     internal fun collectListeners(): List<SyntheticEventListener<*>> = listeners
+
+    internal fun clear() {
+        listeners.clear()
+    }
 }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt

@@ -169,6 +169,11 @@ open class StyleScopeBuilder : StyleScope, StyleHolder {
         properties.addAll(sb.properties)
         variables.addAll(sb.variables)
     }
+
+    internal fun clear() {
+        properties.clear()
+        variables.clear()
+    }
 }
 
 data class StylePropertyDeclaration(

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt

@@ -100,7 +100,6 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
     }
 }
 
-
 @OptIn(ComposeWebInternalApi::class)
 @Composable
 fun <TElement : Element> TagElement(
@@ -118,20 +117,20 @@ fun <TElement : Element> TagElement(
             DomElementWrapper(node)
         },
         attrsSkippableUpdate = {
-            val attrsScope = AttrsScopeBuilder<TElement>()
+            val attrsScope = scope.attrsScope
+            attrsScope.clear()
             applyAttrs?.invoke(attrsScope)
 
             refEffect = attrsScope.refEffect
 
             update {
-                set(attrsScope.classes, DomElementWrapper::updateClasses)
-                set(attrsScope.styleScope, DomElementWrapper::updateStyleDeclarations)
-                set(attrsScope.collect(), DomElementWrapper::updateAttrs)
-                set(
-                    attrsScope.eventsListenerScopeBuilder.collectListeners(),
-                    DomElementWrapper::updateEventListeners
-                )
-                set(attrsScope.propertyUpdates, DomElementWrapper::updateProperties)
+                reconcile {
+                    updateClasses(attrsScope.classes)
+                    updateStyleDeclarations(attrsScope.styleScope)
+                    updateAttrs(attrsScope.collect())
+                    updateEventListeners(attrsScope.eventsListenerScopeBuilder.collectListeners())
+                    updateProperties(attrsScope.propertyUpdates)
+                }
             }
         },
         elementScope = scope,

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/ElementScope.kt

@@ -10,6 +10,7 @@ import androidx.compose.runtime.RememberObserver
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.currentComposer
 import androidx.compose.runtime.remember
+import org.jetbrains.compose.web.attributes.AttrsScopeBuilder
 import org.w3c.dom.Element
 
 /**
@@ -122,6 +123,8 @@ internal open class ElementScopeImpl<TElement : Element> : ElementScopeBase<TEle
 
     override val DisposableEffectScope.scopeElement: TElement
         get() = element
+
+    internal val attrsScope = AttrsScopeBuilder<TElement>()
 }
 
 interface DomEffectScope {