diff --git a/crates/xilem_web/src/attribute.rs b/crates/xilem_web/src/attribute.rs
index 1fb455605b..06935c345d 100644
--- a/crates/xilem_web/src/attribute.rs
+++ b/crates/xilem_web/src/attribute.rs
@@ -3,9 +3,9 @@ use std::marker::PhantomData;
 
 use xilem_core::{Id, MessageResult};
 
-use crate::{interfaces::sealed::Sealed, AttributeValue, ChangeFlags, Cx, View, ViewMarker};
+use crate::{AttributeValue, ChangeFlags, Cx, View, ViewMarker};
 
-use super::interfaces::Element;
+use super::interfaces::{Element, ElementProps as _};
 
 pub struct Attr<E, T, A> {
     pub(crate) element: E,
@@ -15,15 +15,15 @@ pub struct Attr<E, T, A> {
 }
 
 impl<E, T, A> ViewMarker for Attr<E, T, A> {}
-impl<E, T, A> Sealed for Attr<E, T, A> {}
 
 impl<E: Element<T, A>, T, A> View<T, A> for Attr<E, T, A> {
     type State = E::State;
     type Element = E::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        cx.add_attr_to_element(&self.name, &self.value);
-        self.element.build(cx)
+        let (id, mut state, element) = self.element.build(cx);
+        state.set_attribute(Some(element.as_ref()), &self.name, &self.value);
+        (id, state, element)
     }
 
     fn rebuild(
@@ -34,7 +34,7 @@ impl<E: Element<T, A>, T, A> View<T, A> for Attr<E, T, A> {
         state: &mut Self::State,
         element: &mut Self::Element,
     ) -> ChangeFlags {
-        cx.add_attr_to_element(&self.name, &self.value);
+        state.set_attribute(None, &self.name, &self.value);
         self.element.rebuild(cx, &prev.element, id, state, element)
     }
 
diff --git a/crates/xilem_web/src/class.rs b/crates/xilem_web/src/class.rs
index da2f587690..db4df2bb87 100644
--- a/crates/xilem_web/src/class.rs
+++ b/crates/xilem_web/src/class.rs
@@ -3,7 +3,7 @@ use std::{borrow::Cow, marker::PhantomData};
 use xilem_core::{Id, MessageResult};
 
 use crate::{
-    interfaces::{sealed::Sealed, Element},
+    interfaces::{Element, ElementProps as _},
     ChangeFlags, Cx, View, ViewMarker,
 };
 
@@ -83,17 +83,17 @@ pub struct Class<E, T, A> {
 }
 
 impl<E, T, A> ViewMarker for Class<E, T, A> {}
-impl<E, T, A> Sealed for Class<E, T, A> {}
 
 impl<E: Element<T, A>, T, A> View<T, A> for Class<E, T, A> {
     type State = E::State;
     type Element = E::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
+        let (id, mut state, el) = self.element.build(cx);
         for class_name in &self.class_names {
-            cx.add_class_to_element(class_name);
+            state.set_class(Some(el.as_ref()), class_name.clone());
         }
-        self.element.build(cx)
+        (id, state, el)
     }
 
     fn rebuild(
@@ -105,7 +105,7 @@ impl<E: Element<T, A>, T, A> View<T, A> for Class<E, T, A> {
         element: &mut Self::Element,
     ) -> ChangeFlags {
         for class_name in &self.class_names {
-            cx.add_class_to_element(class_name);
+            state.set_class(None, class_name.clone());
         }
         self.element.rebuild(cx, &prev.element, id, state, element)
     }
diff --git a/crates/xilem_web/src/context.rs b/crates/xilem_web/src/context.rs
index ce793851d5..43b670c50e 100644
--- a/crates/xilem_web/src/context.rs
+++ b/crates/xilem_web/src/context.rs
@@ -1,217 +1,14 @@
 use std::any::Any;
 
+use crate::{app::AppRunner, view::DomNode, Message, Pod};
 use bitflags::bitflags;
-use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::Document;
-
 use xilem_core::{Id, IdPath};
 
-use crate::{
-    app::AppRunner,
-    diff::{diff_kv_iterables, Diff},
-    vecmap::VecMap,
-    view::DomNode,
-    AttributeValue, Message, Pod,
-};
-
-type CowStr = std::borrow::Cow<'static, str>;
-
-#[derive(Debug, Default)]
-pub struct HtmlProps {
-    pub(crate) attributes: VecMap<CowStr, AttributeValue>,
-    pub(crate) classes: VecMap<CowStr, ()>,
-    pub(crate) styles: VecMap<CowStr, CowStr>,
-}
-
-impl HtmlProps {
-    fn apply(&mut self, el: &web_sys::Element) -> Self {
-        let attributes = self.apply_attributes(el);
-        let classes = self.apply_classes(el);
-        let styles = self.apply_styles(el);
-        Self {
-            attributes,
-            classes,
-            styles,
-        }
-    }
-
-    fn apply_attributes(&mut self, element: &web_sys::Element) -> VecMap<CowStr, AttributeValue> {
-        let mut attributes = VecMap::default();
-        std::mem::swap(&mut attributes, &mut self.attributes);
-        for (name, value) in attributes.iter() {
-            set_attribute(element, name, &value.serialize());
-        }
-        attributes
-    }
-
-    fn apply_classes(&mut self, element: &web_sys::Element) -> VecMap<CowStr, ()> {
-        let mut classes = VecMap::default();
-        std::mem::swap(&mut classes, &mut self.classes);
-        for (class_name, ()) in classes.iter() {
-            set_class(element, class_name);
-        }
-        classes
-    }
-
-    fn apply_styles(&mut self, element: &web_sys::Element) -> VecMap<CowStr, CowStr> {
-        let mut styles = VecMap::default();
-        std::mem::swap(&mut styles, &mut self.styles);
-        for (name, value) in styles.iter() {
-            set_style(element, name, value);
-        }
-        styles
-    }
-
-    fn apply_changes(&mut self, element: &web_sys::Element, props: &mut HtmlProps) -> ChangeFlags {
-        self.apply_attribute_changes(element, &mut props.attributes)
-            | self.apply_class_changes(element, &mut props.classes)
-            | self.apply_style_changes(element, &mut props.styles)
-    }
-
-    pub(crate) fn apply_attribute_changes(
-        &mut self,
-        element: &web_sys::Element,
-        attributes: &mut VecMap<CowStr, AttributeValue>,
-    ) -> ChangeFlags {
-        let mut changed = ChangeFlags::empty();
-        // update attributes
-        for itm in diff_kv_iterables(&*attributes, &self.attributes) {
-            match itm {
-                Diff::Add(name, value) | Diff::Change(name, value) => {
-                    set_attribute(element, name, &value.serialize());
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-                Diff::Remove(name) => {
-                    remove_attribute(element, name);
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-            }
-        }
-        std::mem::swap(attributes, &mut self.attributes);
-        self.attributes.clear();
-        changed
-    }
-
-    pub(crate) fn apply_class_changes(
-        &mut self,
-        element: &web_sys::Element,
-        classes: &mut VecMap<CowStr, ()>,
-    ) -> ChangeFlags {
-        let mut changed = ChangeFlags::empty();
-        // update attributes
-        for itm in diff_kv_iterables(&*classes, &self.classes) {
-            match itm {
-                Diff::Add(class_name, ()) | Diff::Change(class_name, ()) => {
-                    set_class(element, class_name);
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-                Diff::Remove(class_name) => {
-                    remove_class(element, class_name);
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-            }
-        }
-        std::mem::swap(classes, &mut self.classes);
-        self.classes.clear();
-        changed
-    }
-
-    pub(crate) fn apply_style_changes(
-        &mut self,
-        element: &web_sys::Element,
-        styles: &mut VecMap<CowStr, CowStr>,
-    ) -> ChangeFlags {
-        let mut changed = ChangeFlags::empty();
-        // update attributes
-        for itm in diff_kv_iterables(&*styles, &self.styles) {
-            match itm {
-                Diff::Add(name, value) | Diff::Change(name, value) => {
-                    set_style(element, name, value);
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-                Diff::Remove(name) => {
-                    remove_style(element, name);
-                    changed |= ChangeFlags::OTHER_CHANGE;
-                }
-            }
-        }
-        std::mem::swap(styles, &mut self.styles);
-        self.styles.clear();
-        changed
-    }
-}
-
-fn set_attribute(element: &web_sys::Element, name: &str, value: &str) {
-    // we have to special-case `value` because setting the value using `set_attribute`
-    // doesn't work after the value has been changed.
-    if name == "value" {
-        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
-        element.set_value(value);
-    } else if name == "checked" {
-        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
-        element.set_checked(true);
-    } else {
-        element.set_attribute(name, value).unwrap_throw();
-    }
-}
-
-fn remove_attribute(element: &web_sys::Element, name: &str) {
-    // we have to special-case `checked` because setting the value using `set_attribute`
-    // doesn't work after the value has been changed.
-    if name == "checked" {
-        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
-        element.set_checked(false);
-    } else {
-        element.remove_attribute(name).unwrap_throw();
-    }
-}
-
-fn set_class(element: &web_sys::Element, class_name: &str) {
-    debug_assert!(
-        !class_name.is_empty(),
-        "class names cannot be the empty string"
-    );
-    debug_assert!(
-        !class_name.contains(' '),
-        "class names cannot contain the ascii space character"
-    );
-    element.class_list().add_1(class_name).unwrap_throw();
-}
-
-fn remove_class(element: &web_sys::Element, class_name: &str) {
-    debug_assert!(
-        !class_name.is_empty(),
-        "class names cannot be the empty string"
-    );
-    debug_assert!(
-        !class_name.contains(' '),
-        "class names cannot contain the ascii space character"
-    );
-    element.class_list().remove_1(class_name).unwrap_throw();
-}
-
-fn set_style(element: &web_sys::Element, name: &str, value: &str) {
-    if let Some(el) = element.dyn_ref::<web_sys::HtmlElement>() {
-        el.style().set_property(name, value).unwrap_throw();
-    } else if let Some(el) = element.dyn_ref::<web_sys::SvgElement>() {
-        el.style().set_property(name, value).unwrap_throw();
-    }
-}
-
-fn remove_style(element: &web_sys::Element, name: &str) {
-    if let Some(el) = element.dyn_ref::<web_sys::HtmlElement>() {
-        el.style().remove_property(name).unwrap_throw();
-    } else if let Some(el) = element.dyn_ref::<web_sys::SvgElement>() {
-        el.style().remove_property(name).unwrap_throw();
-    }
-}
-
 // Note: xilem has derive Clone here. Not sure.
 pub struct Cx {
     id_path: IdPath,
     document: Document,
-    // TODO There's likely a cleaner more robust way to propagate the attributes to an element
-    pub(crate) current_element_props: HtmlProps,
     app_ref: Option<Box<dyn AppRunner>>,
 }
 
@@ -234,7 +31,6 @@ impl Cx {
             id_path: Vec::new(),
             document: crate::document(),
             app_ref: None,
-            current_element_props: Default::default(),
         }
     }
 
@@ -306,64 +102,6 @@ impl Cx {
         &self.document
     }
 
-    pub(crate) fn build_element(&mut self, ns: &str, name: &str) -> (web_sys::Element, HtmlProps) {
-        let el = self
-            .document
-            .create_element_ns(Some(ns), name)
-            .expect("could not create element");
-        let props = self.current_element_props.apply(&el);
-        (el, props)
-    }
-
-    pub(crate) fn rebuild_element(
-        &mut self,
-        element: &web_sys::Element,
-        props: &mut HtmlProps,
-    ) -> ChangeFlags {
-        self.current_element_props.apply_changes(element, props)
-    }
-
-    // TODO Not sure how multiple attribute definitions with the same name should be handled (e.g. `e.attr("class", "a").attr("class", "b")`)
-    // Currently the outer most (in the example above "b") defines the attribute (when it isn't `None`, in that case the inner attr defines the value)
-    pub(crate) fn add_attr_to_element(&mut self, name: &CowStr, value: &Option<AttributeValue>) {
-        // Panic in dev if "class" is used as an attribute. In production the result is undefined.
-        debug_assert!(
-            name != "class",
-            "classes should be set using the `class` method"
-        );
-        // Panic in dev if "style" is used as an attribute. In production the result is undefined.
-        debug_assert!(
-            name != "style",
-            "styles should be set using the `style` method"
-        );
-
-        if let Some(value) = value {
-            // could be slightly optimized via something like this: `new_attrs.entry(name).or_insert_with(|| value)`
-            if !self.current_element_props.attributes.contains_key(name) {
-                self.current_element_props
-                    .attributes
-                    .insert(name.clone(), value.clone());
-            }
-        }
-    }
-
-    pub(crate) fn add_class_to_element(&mut self, class_name: &CowStr) {
-        // Don't strictly need this check but I assume its better for perf (might not be though)
-        if !self.current_element_props.classes.contains_key(class_name) {
-            self.current_element_props
-                .classes
-                .insert(class_name.clone(), ());
-        }
-    }
-
-    pub(crate) fn add_style_to_element(&mut self, name: &CowStr, value: &CowStr) {
-        if !self.current_element_props.styles.contains_key(name) {
-            self.current_element_props
-                .styles
-                .insert(name.clone(), value.clone());
-        }
-    }
-
     pub fn message_thunk(&self) -> MessageThunk {
         MessageThunk {
             id_path: self.id_path.clone(),
diff --git a/crates/xilem_web/src/elements.rs b/crates/xilem_web/src/elements.rs
index ee4b31e67d..cdebab4c93 100644
--- a/crates/xilem_web/src/elements.rs
+++ b/crates/xilem_web/src/elements.rs
@@ -4,20 +4,140 @@ use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use xilem_core::{Id, MessageResult, VecSplice};
 
 use crate::{
-    context::HtmlProps, interfaces::sealed::Sealed, view::DomNode, ChangeFlags, Cx, ElementsSplice,
-    Pod, View, ViewMarker, ViewSequence, HTML_NS,
+    diff::{diff_kv_iterables, Diff},
+    vecmap::VecMap,
+    view::DomNode,
+    AttributeValue, ChangeFlags, Cx, ElementsSplice, Pod, View, ViewMarker, ViewSequence, HTML_NS,
 };
 
 use super::interfaces::Element;
 
 type CowStr = std::borrow::Cow<'static, str>;
 
+#[derive(Debug, Default)]
+pub struct ElementProps {
+    pub(crate) attributes: VecMap<CowStr, AttributeValue>,
+    pub(crate) next_attributes: VecMap<CowStr, AttributeValue>,
+    pub(crate) classes: VecMap<CowStr, ()>,
+    pub(crate) next_classes: VecMap<CowStr, ()>,
+    pub(crate) styles: VecMap<CowStr, CowStr>,
+    pub(crate) next_styles: VecMap<CowStr, CowStr>,
+}
+
+impl ElementProps {
+    pub(crate) fn apply_changes(&mut self, element: &web_sys::Element) -> ChangeFlags {
+        self.apply_attribute_changes(element)
+            | self.apply_class_changes(element)
+            | self.apply_style_changes(element)
+    }
+
+    pub(crate) fn apply_attribute_changes(&mut self, element: &web_sys::Element) -> ChangeFlags {
+        let mut changed = ChangeFlags::empty();
+        // update attributes
+        for itm in diff_kv_iterables(&self.attributes, &self.next_attributes) {
+            match itm {
+                Diff::Add(name, value) | Diff::Change(name, value) => {
+                    set_attribute(element, name, &value.serialize());
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+                Diff::Remove(name) => {
+                    remove_attribute(element, name);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+            }
+        }
+        std::mem::swap(&mut self.next_attributes, &mut self.attributes);
+        self.next_attributes.clear();
+        changed
+    }
+
+    pub(crate) fn apply_class_changes(&mut self, element: &web_sys::Element) -> ChangeFlags {
+        let mut changed = ChangeFlags::empty();
+        // update attributes
+        for itm in diff_kv_iterables(&self.classes, &self.next_classes) {
+            match itm {
+                Diff::Add(class_name, ()) | Diff::Change(class_name, ()) => {
+                    set_class(element, class_name);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+                Diff::Remove(class_name) => {
+                    remove_class(element, class_name);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+            }
+        }
+        std::mem::swap(&mut self.next_classes, &mut self.classes);
+        self.next_classes.clear();
+        changed
+    }
+
+    pub(crate) fn apply_style_changes(&mut self, element: &web_sys::Element) -> ChangeFlags {
+        let mut changed = ChangeFlags::empty();
+        // update attributes
+        for itm in diff_kv_iterables(&self.styles, &self.next_styles) {
+            match itm {
+                Diff::Add(name, value) | Diff::Change(name, value) => {
+                    set_style(element, name, value);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+                Diff::Remove(name) => {
+                    remove_style(element, name);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+            }
+        }
+        std::mem::swap(&mut self.next_styles, &mut self.styles);
+        self.next_styles.clear();
+        changed
+    }
+}
+
+impl crate::interfaces::ElementProps for ElementProps {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &CowStr,
+        value: &Option<AttributeValue>,
+    ) {
+        if let Some(value) = value {
+            if let Some(element) = element {
+                set_attribute(element, name, &value.serialize());
+                self.attributes.insert(name.clone(), value.clone());
+            } else {
+                // Could be slightly optimized via something like this: `self.new_attributes.entry(name).or_insert_with(|| value)`
+                // (when it is implemented in `VecMap`)
+                if !self.next_attributes.contains_key(name) {
+                    self.next_attributes.insert(name.clone(), value.clone());
+                }
+            }
+        }
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: CowStr) {
+        if let Some(element) = element {
+            set_class(element, &class);
+            self.classes.insert(class, ());
+        } else {
+            self.next_classes.insert(class, ());
+        }
+    }
+
+    fn set_style(&mut self, element: Option<&web_sys::Element>, key: CowStr, value: CowStr) {
+        if let Some(element) = element {
+            set_style(element, &key, &value);
+            self.styles.insert(key, value);
+        } else {
+            self.next_styles.insert(key, value);
+        }
+    }
+}
+
 /// The state associated with a HTML element `View`.
 ///
 /// Stores handles to the child elements and any child state, as well as attributes and event listeners
 pub struct ElementState<ViewSeqState> {
     pub(crate) children_states: ViewSeqState,
-    pub(crate) props: HtmlProps,
+    pub(crate) props: ElementProps,
     pub(crate) child_elements: Vec<Pod>,
     /// This is temporary cache for elements while updating/diffing,
     /// after usage it shouldn't contain any elements,
@@ -25,6 +145,90 @@ pub struct ElementState<ViewSeqState> {
     pub(crate) scratch: Vec<Pod>,
 }
 
+fn set_attribute(element: &web_sys::Element, name: &str, value: &str) {
+    // we have to special-case `value` because setting the value using `set_attribute`
+    // doesn't work after the value has been changed.
+    if name == "value" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_value(value);
+    } else if name == "checked" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_checked(true);
+    } else {
+        element.set_attribute(name, value).unwrap_throw();
+    }
+}
+
+fn remove_attribute(element: &web_sys::Element, name: &str) {
+    // we have to special-case `checked` because setting the value using `set_attribute`
+    // doesn't work after the value has been changed.
+    if name == "checked" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_checked(false);
+    } else {
+        element.remove_attribute(name).unwrap_throw();
+    }
+}
+
+fn set_class(element: &web_sys::Element, class_name: &str) {
+    debug_assert!(
+        !class_name.is_empty(),
+        "class names cannot be the empty string"
+    );
+    debug_assert!(
+        !class_name.contains(' '),
+        "class names cannot contain the ascii space character"
+    );
+    element.class_list().add_1(class_name).unwrap_throw();
+}
+
+fn remove_class(element: &web_sys::Element, class_name: &str) {
+    debug_assert!(
+        !class_name.is_empty(),
+        "class names cannot be the empty string"
+    );
+    debug_assert!(
+        !class_name.contains(' '),
+        "class names cannot contain the ascii space character"
+    );
+    element.class_list().remove_1(class_name).unwrap_throw();
+}
+
+fn set_style(element: &web_sys::Element, name: &str, value: &str) {
+    if let Some(el) = element.dyn_ref::<web_sys::HtmlElement>() {
+        el.style().set_property(name, value).unwrap_throw();
+    } else if let Some(el) = element.dyn_ref::<web_sys::SvgElement>() {
+        el.style().set_property(name, value).unwrap_throw();
+    }
+}
+
+fn remove_style(element: &web_sys::Element, name: &str) {
+    if let Some(el) = element.dyn_ref::<web_sys::HtmlElement>() {
+        el.style().remove_property(name).unwrap_throw();
+    } else if let Some(el) = element.dyn_ref::<web_sys::SvgElement>() {
+        el.style().remove_property(name).unwrap_throw();
+    }
+}
+
+impl<ViewSeqState> crate::interfaces::ElementProps for ElementState<ViewSeqState> {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &CowStr,
+        value: &Option<AttributeValue>,
+    ) {
+        self.props.set_attribute(element, name, value);
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: CowStr) {
+        self.props.set_class(element, class);
+    }
+
+    fn set_style(&mut self, element: Option<&web_sys::Element>, key: CowStr, value: CowStr) {
+        self.props.set_style(element, key, value);
+    }
+}
+
 // TODO something like the `after_update` of the former `Element` view (likely as a wrapper view instead)
 
 pub struct CustomElement<T, A = (), Children = ()> {
@@ -46,12 +250,6 @@ pub fn custom_element<T, A, Children: ViewSequence<T, A>>(
     }
 }
 
-impl<T, A, Children> CustomElement<T, A, Children> {
-    fn node_name(&self) -> &str {
-        &self.name
-    }
-}
-
 /// An `ElementsSplice` that does DOM updates in place
 struct ChildrenSplice<'a, 'b, 'c> {
     children: VecSplice<'a, 'b, Pod>,
@@ -137,7 +335,6 @@ impl<'a, 'b, 'c> ElementsSplice for ChildrenSplice<'a, 'b, 'c> {
 }
 
 impl<T, A, Children> ViewMarker for CustomElement<T, A, Children> {}
-impl<T, A, Children> Sealed for CustomElement<T, A, Children> {}
 
 impl<T, A, Children> View<T, A> for CustomElement<T, A, Children>
 where
@@ -150,7 +347,10 @@ where
     type Element = web_sys::HtmlElement;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        let (el, props) = cx.build_element(HTML_NS, &self.name);
+        let el = cx
+            .document()
+            .create_element_ns(Some(HTML_NS), &self.name)
+            .expect("Could not create element");
 
         let mut child_elements = vec![];
         let mut scratch = vec![];
@@ -167,11 +367,12 @@ where
             .unwrap_throw();
 
         let el = el.dyn_into().unwrap_throw();
+
         let state = ElementState {
             children_states,
             child_elements,
             scratch,
-            props,
+            props: Default::default(),
         };
         (id, state, el)
     }
@@ -193,8 +394,13 @@ where
                 .parent_element()
                 .expect_throw("this element was mounted and so should have a parent");
             parent.remove_child(element).unwrap_throw();
-            let (new_element, props) = cx.build_element(HTML_NS, self.node_name());
-            state.props = props;
+            let new_element = cx
+                .document()
+                .create_element_ns(Some(HTML_NS), &self.name)
+                .expect("Could not create element");
+            state.props.attributes = VecMap::default();
+            state.props.classes = VecMap::default();
+            state.props.styles = VecMap::default();
             // TODO could this be combined with child updates?
             while let Some(child) = element.child_nodes().get(0) {
                 new_element.append_child(&child).unwrap_throw();
@@ -203,7 +409,7 @@ where
             changed |= ChangeFlags::STRUCTURE;
         }
 
-        changed |= cx.rebuild_element(element, &mut state.props);
+        changed |= state.props.apply_changes(element);
 
         // update children
         let mut splice =
@@ -273,14 +479,16 @@ macro_rules! define_element {
         pub struct $ty_name<$t, $a = (), $vs = ()>($vs, PhantomData<fn() -> ($t, $a)>);
 
         impl<$t, $a, $vs> ViewMarker for $ty_name<$t, $a, $vs> {}
-        impl<$t, $a, $vs> Sealed for $ty_name<$t, $a, $vs> {}
 
         impl<$t, $a, $vs: ViewSequence<$t, $a>> View<$t, $a> for $ty_name<$t, $a, $vs> {
             type State = ElementState<$vs::State>;
             type Element = web_sys::$dom_interface;
 
             fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-                let (el, props) = cx.build_element($ns, $tag_name);
+                let el = cx
+                    .document()
+                    .create_element_ns(Some($ns), $tag_name)
+                    .expect("Could not create element");
 
                 let mut child_elements = vec![];
                 let mut scratch = vec![];
@@ -300,7 +508,7 @@ macro_rules! define_element {
                     children_states,
                     child_elements,
                     scratch,
-                    props,
+                    props: Default::default(),
                 };
                 (id, state, el)
             }
@@ -315,7 +523,7 @@ macro_rules! define_element {
             ) -> ChangeFlags {
                 let mut changed = ChangeFlags::empty();
 
-                changed |= cx.rebuild_element(element, &mut state.props);
+                changed |= state.props.apply_changes(element);
 
                 // update children
                 let mut splice = ChildrenSplice::new(&mut state.child_elements, &mut state.scratch, element);
@@ -361,10 +569,7 @@ macro_rules! define_elements {
         use xilem_core::{Id, MessageResult};
         use super::{ElementState, ChildrenSplice};
 
-        use crate::{
-            interfaces::sealed::Sealed,
-            ChangeFlags, Cx, View, ViewMarker, ViewSequence,
-        };
+        use crate::{ChangeFlags, Cx, View, ViewMarker, ViewSequence};
 
         $(define_element!(crate::$ns, $element_def);)*
     };
diff --git a/crates/xilem_web/src/events.rs b/crates/xilem_web/src/events.rs
index e417216cc3..93c75e96c9 100644
--- a/crates/xilem_web/src/events.rs
+++ b/crates/xilem_web/src/events.rs
@@ -1,5 +1,5 @@
 use crate::{
-    interfaces::{sealed::Sealed, Element},
+    interfaces::{Element, ElementProps},
     view::DomNode,
     ChangeFlags, Cx, OptionalAction, View, ViewMarker,
 };
@@ -87,8 +87,31 @@ pub struct OnEventState<S> {
     child_state: S,
 }
 
+impl<S: ElementProps> ElementProps for OnEventState<S> {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &Cow<'static, str>,
+        value: &Option<crate::AttributeValue>,
+    ) {
+        self.child_state.set_attribute(element, name, value);
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>) {
+        self.child_state.set_class(element, class);
+    }
+
+    fn set_style(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        key: Cow<'static, str>,
+        value: Cow<'static, str>,
+    ) {
+        self.child_state.set_style(element, key, value);
+    }
+}
+
 impl<E, T, A, Ev, C> ViewMarker for OnEvent<E, T, A, Ev, C> {}
-impl<E, T, A, Ev, C> Sealed for OnEvent<E, T, A, Ev, C> {}
 
 impl<E, T, A, Ev, C, OA> View<T, A> for OnEvent<E, T, A, Ev, C>
 where
@@ -233,7 +256,6 @@ macro_rules! event_definitions {
         }
 
         impl<E, T, A, C> ViewMarker for $ty_name<E, T, A, C> {}
-        impl<E, T, A, C> Sealed for $ty_name<E, T, A, C> {}
 
         impl<E, T, A, C, OA> View<T, A> for $ty_name<E, T, A, C>
         where
diff --git a/crates/xilem_web/src/interfaces.rs b/crates/xilem_web/src/interfaces.rs
index e7ec6a816a..b02b6f8ff3 100644
--- a/crates/xilem_web/src/interfaces.rs
+++ b/crates/xilem_web/src/interfaces.rs
@@ -1,20 +1,50 @@
 use crate::{
     class::{Class, IntoClasses},
+    events::{self, OnEvent},
     style::{IntoStyles, Style},
-    Pointer, PointerMsg, View, ViewMarker,
+    Attr, AttributeValue, IntoAttributeValue, OptionalAction, Pointer, PointerMsg, View,
+    ViewMarker,
 };
 use std::{borrow::Cow, marker::PhantomData};
 
 use gloo::events::EventListenerOptions;
 use wasm_bindgen::JsCast;
 
-use crate::{
-    events::{self, OnEvent},
-    Attr, IntoAttributeValue, OptionalAction,
-};
+/// This trait is used in `View::State` to allow setting properties of a DOM element for various modifier types, such as `Class` or `Attr`
+/// For every view reconciliation the methods have to be called again.
+/// In `View::build` the properties are usually set while traversing up from the concrete element (see `Attr`), here they are set directly on the given element.
+/// In `View::rebuild` the properties set via the methods are accumulated until reaching the concrete element type,
+/// such as `crate::elements::html::Div` where they're diffed with the previous state (and resulting changes are propagated to the underlying DOM element)
+pub trait ElementProps {
+    /// Set an HTML attribute
+    /// This method is additive, i.e. if `value` is `None` the possibly previous set value is not removed, and it is a noop
+    ///
+    /// When `element` is `None` the `name`/`value` pair is scheduled for the next update/diffing process in the concrete element (in `<Element as View>::rebuild`).
+    /// When `element` is Some(_) it is set directly on the element this usually happens in `View::build` on the up-traversal (see `<Attr as View>::build`)
+    #[allow(clippy::ptr_arg)]
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &Cow<'static, str>,
+        value: &Option<AttributeValue>,
+    );
 
-pub(crate) mod sealed {
-    pub trait Sealed {}
+    /// Add a class
+    ///
+    /// When `element` is `None` the `class` is scheduled for the next update/diffing process in the concrete element (in `<Element as View>::rebuild`).
+    /// When `element` is Some(_) it is set directly on the element this usually happens in `View::build` on the up-traversal (see e.g. `<Class as View>::build`)
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>);
+
+    /// Set an HTML/SVG style pair
+    ///
+    /// When `element` is `None` the `key`/`value` pair is scheduled for the next update/diffing process in the concrete element (in `<Element as View>::rebuild`).
+    /// When `element` is Some(_) it is set directly on the element this usually happens in `View::build` on the up-traversal (see `<Style as View>::build`)
+    fn set_style(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        key: Cow<'static, str>,
+        value: Cow<'static, str>,
+    );
 }
 
 // TODO should the options be its own function `on_event_with_options`,
@@ -33,7 +63,8 @@ macro_rules! event_handler_mixin {
     };
 }
 
-pub trait Element<T, A = ()>: View<T, A> + ViewMarker + sealed::Sealed
+pub trait Element<T, A = ()>:
+    View<T, A, State: ElementProps, Element: AsRef<web_sys::Element>> + ViewMarker
 where
     Self: Sized,
 {
@@ -619,12 +650,6 @@ dom_interface_macro_and_trait_definitions!(
 
 // Core View implementations
 
-impl<ParentT, ParentA, ChildT, ChildA, V, F> sealed::Sealed
-    for crate::Adapt<ParentT, ParentA, ChildT, ChildA, V, F>
-{
-}
-impl<ParentT, ChildT, V, F> sealed::Sealed for crate::AdaptState<ParentT, ChildT, V, F> {}
-
 macro_rules! impl_dom_traits_for_adapt_views {
     ($dom_interface:ident, ()) => {
         impl<ParentT, ParentA, ChildT, ChildA, V, F> $dom_interface<ParentT, ParentA>
diff --git a/crates/xilem_web/src/lib.rs b/crates/xilem_web/src/lib.rs
index 3821ecf79e..e043727c48 100644
--- a/crates/xilem_web/src/lib.rs
+++ b/crates/xilem_web/src/lib.rs
@@ -1,3 +1,4 @@
+#![feature(associated_type_bounds)]
 // Copyright 2023 the Druid Authors.
 // SPDX-License-Identifier: Apache-2.0
 
diff --git a/crates/xilem_web/src/one_of.rs b/crates/xilem_web/src/one_of.rs
index 7d912b99fb..bbb6b131c4 100644
--- a/crates/xilem_web/src/one_of.rs
+++ b/crates/xilem_web/src/one_of.rs
@@ -1,15 +1,19 @@
-use wasm_bindgen::throw_str;
-
 use crate::{
-    interfaces::for_all_element_descendents, ChangeFlags, Cx, ElementsSplice, View, ViewMarker,
-    ViewSequence,
+    interfaces::{for_all_element_descendents, ElementProps},
+    AttributeValue, ChangeFlags, Cx, ElementsSplice, View, ViewMarker, ViewSequence,
 };
+use std::borrow::Cow;
+use wasm_bindgen::throw_str;
 
 macro_rules! impl_dom_traits {
     ($dom_interface:ident, ($ident:ident: $($vars:ident),+)) => {
         impl<VT, VA, $($vars: $crate::interfaces::$dom_interface<VT, VA>),+> $crate::interfaces::$dom_interface<VT, VA> for $ident<$($vars),+>
         where
-        $($vars: $crate::interfaces::$dom_interface<VT, VA>,)+
+        $(
+            $vars: $crate::interfaces::$dom_interface<VT, VA>,
+            $vars::State: ElementProps,
+            $vars::Element: AsRef<web_sys::Element>,
+        )+
         {}
     };
 }
@@ -26,7 +30,6 @@ macro_rules! one_of_view {
             $($vars($vars),)+
         }
 
-        impl<$($vars),+> crate::interfaces::sealed::Sealed for $ident<$($vars),+> {}
         impl_dom_traits!(Element, ($ident: $($vars),+));
         for_all_element_descendents!(impl_dom_traits, ($ident: $($vars),+));
 
@@ -40,6 +43,64 @@ macro_rules! one_of_view {
                 }
             }
         }
+
+        impl<$($vars),+> AsRef<web_sys::Element> for $ident<$($vars),+>
+        where
+            $($vars: AsRef<web_sys::Element>,)+
+        {
+            fn as_ref(&self) -> &web_sys::Element {
+                match self {
+                    $( $ident::$vars(element) => element.as_ref(), )+
+                }
+            }
+        }
+
+        impl<$($vars),+> ElementProps for $ident<$($vars),+>
+        where
+            $($vars: ElementProps,)+
+         {
+            fn set_attribute(
+                &mut self,
+                element: Option<&web_sys::Element>,
+                name: &Cow<'static, str>,
+                value: &Option<AttributeValue>,
+            ) {
+                match self {
+                    $(
+                        $ident::$vars(state) => {
+                            state.set_attribute(element, name, value);
+                        }
+                    )+
+                }
+            }
+
+            fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>) {
+                match self {
+                    $(
+                        $ident::$vars(state) => {
+                            state.set_class(element, class);
+                        }
+                    )+
+                }
+            }
+
+            fn set_style(
+                &mut self,
+                element: Option<&web_sys::Element>,
+                key: Cow<'static, str>,
+                value: Cow<'static, str>,
+            ) {
+                match self {
+                    $(
+                        $ident::$vars(state) => {
+                            state.set_style(element, key, value);
+                        }
+                    )+
+                }
+            }
+
+       }
+
         impl<$($vars),+> ViewMarker for $ident<$($vars),+> {}
 
         impl<VT, VA, $($vars),+> View<VT, VA> for $ident<$($vars),+>
diff --git a/crates/xilem_web/src/pointer.rs b/crates/xilem_web/src/pointer.rs
index 7c738a64ff..a62a368dbe 100644
--- a/crates/xilem_web/src/pointer.rs
+++ b/crates/xilem_web/src/pointer.rs
@@ -3,7 +3,7 @@
 
 //! Interactivity with pointer events.
 
-use std::{any::Any, marker::PhantomData};
+use std::{any::Any, borrow::Cow, marker::PhantomData};
 
 use wasm_bindgen::{prelude::Closure, JsCast};
 use web_sys::PointerEvent;
@@ -12,7 +12,7 @@ use xilem_core::{Id, MessageResult};
 
 use crate::{
     context::{ChangeFlags, Cx},
-    interfaces::Element,
+    interfaces::{Element, ElementProps},
     view::{DomNode, View, ViewMarker},
 };
 
@@ -33,6 +33,30 @@ pub struct PointerState<S> {
     child_state: S,
 }
 
+impl<S: ElementProps> ElementProps for PointerState<S> {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &Cow<'static, str>,
+        value: &Option<crate::AttributeValue>,
+    ) {
+        self.child_state.set_attribute(element, name, value);
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>) {
+        self.child_state.set_class(element, class);
+    }
+
+    fn set_style(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        key: Cow<'static, str>,
+        value: Cow<'static, str>,
+    ) {
+        self.child_state.set_style(element, key, value);
+    }
+}
+
 #[derive(Debug)]
 /// A message representing a pointer event.
 pub enum PointerMsg {
@@ -83,7 +107,6 @@ crate::interfaces::impl_dom_interfaces_for_ty!(
 );
 
 impl<V, T, A, F> ViewMarker for Pointer<V, T, A, F> {}
-impl<V, T, A, F> crate::interfaces::sealed::Sealed for Pointer<V, T, A, F> {}
 
 impl<T, A, F: Fn(&mut T, PointerMsg) -> A, V: View<T, A>> View<T, A> for Pointer<V, T, A, F> {
     type State = PointerState<V::State>;
diff --git a/crates/xilem_web/src/style.rs b/crates/xilem_web/src/style.rs
index ddd7364fe6..cf23ee4ee2 100644
--- a/crates/xilem_web/src/style.rs
+++ b/crates/xilem_web/src/style.rs
@@ -4,7 +4,7 @@ use std::{borrow::Cow, collections::HashMap};
 
 use xilem_core::{Id, MessageResult};
 
-use crate::{interfaces::sealed::Sealed, ChangeFlags, Cx, View, ViewMarker};
+use crate::{interfaces::ElementProps as _, ChangeFlags, Cx, View, ViewMarker};
 
 use super::interfaces::Element;
 
@@ -111,17 +111,17 @@ pub struct Style<E, T, A> {
 }
 
 impl<E, T, A> ViewMarker for Style<E, T, A> {}
-impl<E, T, A> Sealed for Style<E, T, A> {}
 
 impl<E: Element<T, A>, T, A> View<T, A> for Style<E, T, A> {
     type State = E::State;
     type Element = E::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
+        let (id, mut state, el) = self.element.build(cx);
         for (key, value) in &self.styles {
-            cx.add_style_to_element(key, value);
+            state.set_style(Some(el.as_ref()), key.clone(), value.clone());
         }
-        self.element.build(cx)
+        (id, state, el)
     }
 
     fn rebuild(
@@ -133,7 +133,7 @@ impl<E: Element<T, A>, T, A> View<T, A> for Style<E, T, A> {
         element: &mut Self::Element,
     ) -> ChangeFlags {
         for (key, value) in &self.styles {
-            cx.add_style_to_element(key, value);
+            state.set_style(None, key.clone(), value.clone());
         }
         self.element.rebuild(cx, &prev.element, id, state, element)
     }
diff --git a/crates/xilem_web/src/svg/common_attrs.rs b/crates/xilem_web/src/svg/common_attrs.rs
index 69278d4a43..8e0d9cbc57 100644
--- a/crates/xilem_web/src/svg/common_attrs.rs
+++ b/crates/xilem_web/src/svg/common_attrs.rs
@@ -9,13 +9,14 @@ use xilem_core::{Id, MessageResult};
 
 use crate::{
     interfaces::{
-        Element, SvgCircleElement, SvgElement, SvgEllipseElement, SvgGeometryElement,
+        Element, ElementProps, SvgCircleElement, SvgElement, SvgEllipseElement, SvgGeometryElement,
         SvgGraphicsElement, SvgLineElement, SvgPathElement, SvgPolygonElement, SvgPolylineElement,
         SvgRectElement, SvgTextContentElement, SvgTextElement, SvgTextPathElement,
         SvgTextPositioningElement, SvggElement, SvgtSpanElement,
     },
-    ChangeFlags, Cx, IntoAttributeValue, View, ViewMarker,
+    ChangeFlags, Cx, View, ViewMarker,
 };
+use crate::{AttributeValue, IntoAttributeValue};
 
 pub struct Fill<V, T, A = ()> {
     child: V,
@@ -87,17 +88,52 @@ impl<T, A, E: SvgTextElement<T, A>> SvgTextElement<T, A> for Fill<E, T, A> {}
 impl<T, A, E: SvgtSpanElement<T, A>> SvgtSpanElement<T, A> for Fill<E, T, A> {}
 
 impl<T, A, V> ViewMarker for Fill<V, T, A> {}
-impl<T, A, V> crate::interfaces::sealed::Sealed for Fill<V, T, A> {}
 
-impl<T, A, V: View<T, A>> View<T, A> for Fill<V, T, A> {
-    type State = (Cow<'static, str>, V::State);
+pub struct FillStrokeState<S> {
+    brush_value: Option<AttributeValue>,
+    child_state: S,
+}
+
+impl<S: crate::interfaces::ElementProps> crate::interfaces::ElementProps for FillStrokeState<S> {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &Cow<'static, str>,
+        value: &Option<AttributeValue>,
+    ) {
+        self.child_state.set_attribute(element, name, value);
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>) {
+        self.child_state.set_class(element, class);
+    }
+
+    fn set_style(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        key: Cow<'static, str>,
+        value: Cow<'static, str>,
+    ) {
+        self.child_state.set_style(element, key, value);
+    }
+}
+
+impl<T, A, V: Element<T, A>> View<T, A> for Fill<V, T, A> {
+    type State = FillStrokeState<V::State>;
     type Element = V::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        let brush_svg_repr = Cow::from(brush_to_string(&self.brush));
-        cx.add_attr_to_element(&"fill".into(), &brush_svg_repr.clone().into_attr_value());
-        let (id, child_state, element) = self.child.build(cx);
-        (id, (brush_svg_repr, child_state), element)
+        let (id, mut child_state, element) = self.child.build(cx);
+        let brush_value = brush_to_string(&self.brush).into_attr_value();
+        child_state.set_attribute(Some(element.as_ref()), &"fill".into(), &brush_value);
+        (
+            id,
+            FillStrokeState {
+                brush_value,
+                child_state,
+            },
+            element,
+        )
     }
 
     fn rebuild(
@@ -105,13 +141,16 @@ impl<T, A, V: View<T, A>> View<T, A> for Fill<V, T, A> {
         cx: &mut Cx,
         prev: &Self,
         id: &mut Id,
-        (brush_svg_repr, child_state): &mut Self::State,
+        FillStrokeState {
+            brush_value,
+            child_state,
+        }: &mut Self::State,
         element: &mut V::Element,
     ) -> ChangeFlags {
         if self.brush != prev.brush {
-            *brush_svg_repr = Cow::from(brush_to_string(&self.brush));
+            *brush_value = brush_to_string(&self.brush).into_attr_value();
         }
-        cx.add_attr_to_element(&"fill".into(), &brush_svg_repr.clone().into_attr_value());
+        child_state.set_attribute(None, &"fill".into(), brush_value);
         self.child
             .rebuild(cx, &prev.child, id, child_state, element)
     }
@@ -119,7 +158,7 @@ impl<T, A, V: View<T, A>> View<T, A> for Fill<V, T, A> {
     fn message(
         &self,
         id_path: &[Id],
-        (_, child_state): &mut Self::State,
+        FillStrokeState { child_state, .. }: &mut Self::State,
         message: Box<dyn Any>,
         app_state: &mut T,
     ) -> MessageResult<A> {
@@ -149,18 +188,29 @@ impl<T, A, E: SvgTextElement<T, A>> SvgTextElement<T, A> for Stroke<E, T, A> {}
 impl<T, A, E: SvgtSpanElement<T, A>> SvgtSpanElement<T, A> for Stroke<E, T, A> {}
 
 impl<T, A, V> ViewMarker for Stroke<V, T, A> {}
-impl<T, A, V> crate::interfaces::sealed::Sealed for Stroke<V, T, A> {}
 
-impl<T, A, V: View<T, A>> View<T, A> for Stroke<V, T, A> {
-    type State = (Cow<'static, str>, V::State);
+impl<T, A, V: Element<T, A>> View<T, A> for Stroke<V, T, A> {
+    type State = FillStrokeState<V::State>;
     type Element = V::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        let brush_svg_repr = Cow::from(brush_to_string(&self.brush));
-        cx.add_attr_to_element(&"stroke".into(), &brush_svg_repr.clone().into_attr_value());
-        cx.add_attr_to_element(&"stroke-width".into(), &self.style.width.into_attr_value());
-        let (id, child_state, element) = self.child.build(cx);
-        (id, (brush_svg_repr, child_state), element)
+        let (id, mut child_state, element) = self.child.build(cx);
+        let brush_value = brush_to_string(&self.brush).into_attr_value();
+        let stroke_width = self.style.width.into_attr_value();
+        child_state.set_attribute(Some(element.as_ref()), &"stroke".into(), &brush_value);
+        child_state.set_attribute(
+            Some(element.as_ref()),
+            &"stroke-width".into(),
+            &stroke_width,
+        );
+        (
+            id,
+            FillStrokeState {
+                brush_value,
+                child_state,
+            },
+            element,
+        )
     }
 
     fn rebuild(
@@ -168,14 +218,18 @@ impl<T, A, V: View<T, A>> View<T, A> for Stroke<V, T, A> {
         cx: &mut Cx,
         prev: &Self,
         id: &mut Id,
-        (brush_svg_repr, child_state): &mut Self::State,
+        FillStrokeState {
+            brush_value,
+            child_state,
+        }: &mut Self::State,
         element: &mut V::Element,
     ) -> ChangeFlags {
         if self.brush != prev.brush {
-            *brush_svg_repr = Cow::from(brush_to_string(&self.brush));
+            *brush_value = brush_to_string(&self.brush).into_attr_value();
         }
-        cx.add_attr_to_element(&"stroke".into(), &brush_svg_repr.clone().into_attr_value());
-        cx.add_attr_to_element(&"stroke-width".into(), &self.style.width.into_attr_value());
+        child_state.set_attribute(None, &"stroke".into(), brush_value);
+        let stroke_width = self.style.width.into_attr_value();
+        child_state.set_attribute(None, &"stroke-width".into(), &stroke_width);
         self.child
             .rebuild(cx, &prev.child, id, child_state, element)
     }
@@ -183,7 +237,7 @@ impl<T, A, V: View<T, A>> View<T, A> for Stroke<V, T, A> {
     fn message(
         &self,
         id_path: &[Id],
-        (_, child_state): &mut Self::State,
+        FillStrokeState { child_state, .. }: &mut Self::State,
         message: Box<dyn Any>,
         app_state: &mut T,
     ) -> MessageResult<A> {
diff --git a/crates/xilem_web/src/svg/kurbo_shape.rs b/crates/xilem_web/src/svg/kurbo_shape.rs
index 454319dd87..68359ff854 100644
--- a/crates/xilem_web/src/svg/kurbo_shape.rs
+++ b/crates/xilem_web/src/svg/kurbo_shape.rs
@@ -5,16 +5,42 @@
 
 use peniko::kurbo::{BezPath, Circle, Line, Rect};
 use std::borrow::Cow;
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
 
 use xilem_core::{Id, MessageResult};
 
 use crate::{
-    context::{ChangeFlags, Cx, HtmlProps},
-    interfaces::sealed::Sealed,
+    context::{ChangeFlags, Cx},
+    elements::ElementProps,
+    interfaces::ElementProps as _,
+    vecmap::{vec_map, VecMap},
     view::{View, ViewMarker},
-    IntoAttributeValue, SVG_NS,
+    AttributeValue, IntoAttributeValue, SVG_NS,
 };
 
+fn build_element<E: JsCast>(
+    document: &web_sys::Document,
+    name: &str,
+    attributes: VecMap<Cow<'static, str>, AttributeValue>,
+) -> (Id, ElementProps, E) {
+    let el = document
+        .create_element_ns(Some(SVG_NS), name)
+        .expect_throw("could not create element");
+
+    for (name, value) in &attributes {
+        el.set_attribute(name, &value.serialize()).unwrap_throw();
+    }
+
+    (
+        Id::next(),
+        ElementProps {
+            attributes,
+            ..Default::default()
+        },
+        el.dyn_into().unwrap_throw(),
+    )
+}
+
 macro_rules! generate_dom_interface_impl {
     ($dom_interface:ident, ($ty_name:ident)) => {
         impl<T, A> $crate::interfaces::$dom_interface<T, A> for $ty_name {}
@@ -25,35 +51,34 @@ generate_dom_interface_impl!(SvgLineElement, (Line));
 crate::interfaces::for_all_svg_line_element_ancestors!(generate_dom_interface_impl, (Line));
 
 impl ViewMarker for Line {}
-impl Sealed for Line {}
 
 impl<T, A> View<T, A> for Line {
-    type State = HtmlProps;
+    type State = ElementProps;
     type Element = web_sys::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        cx.add_attr_to_element(&"x1".into(), &self.p0.x.into_attr_value());
-        cx.add_attr_to_element(&"y1".into(), &self.p0.y.into_attr_value());
-        cx.add_attr_to_element(&"x2".into(), &self.p1.x.into_attr_value());
-        cx.add_attr_to_element(&"y2".into(), &self.p1.y.into_attr_value());
-        let (el, props) = cx.build_element(SVG_NS, "line");
-        let id = Id::next();
-        (id, props, el)
+        let attributes = vec_map![
+            Cow::from("x1") => AttributeValue::F64(self.p0.x),
+            Cow::from("y1") => AttributeValue::F64(self.p0.y),
+            Cow::from("x1") => AttributeValue::F64(self.p1.x),
+            Cow::from("y1") => AttributeValue::F64(self.p1.y),
+        ];
+        build_element(cx.document(), "line", attributes)
     }
 
     fn rebuild(
         &self,
-        cx: &mut Cx,
+        _cx: &mut Cx,
         _prev: &Self,
         _id: &mut Id,
         props: &mut Self::State,
         element: &mut Self::Element,
     ) -> ChangeFlags {
-        cx.add_attr_to_element(&"x1".into(), &self.p0.x.into_attr_value());
-        cx.add_attr_to_element(&"y1".into(), &self.p0.y.into_attr_value());
-        cx.add_attr_to_element(&"x2".into(), &self.p1.x.into_attr_value());
-        cx.add_attr_to_element(&"y2".into(), &self.p1.y.into_attr_value());
-        cx.rebuild_element(element, props)
+        props.set_attribute(None, &"x1".into(), &self.p0.x.into_attr_value());
+        props.set_attribute(None, &"y1".into(), &self.p0.y.into_attr_value());
+        props.set_attribute(None, &"x2".into(), &self.p1.x.into_attr_value());
+        props.set_attribute(None, &"y2".into(), &self.p1.y.into_attr_value());
+        props.apply_changes(element)
     }
 
     fn message(
@@ -71,37 +96,37 @@ generate_dom_interface_impl!(SvgRectElement, (Rect));
 crate::interfaces::for_all_svg_rect_element_ancestors!(generate_dom_interface_impl, (Rect));
 
 impl ViewMarker for Rect {}
-impl Sealed for Rect {}
 
 impl<T, A> View<T, A> for Rect {
-    type State = HtmlProps;
+    type State = ElementProps;
     type Element = web_sys::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        cx.add_attr_to_element(&"x".into(), &self.x0.into_attr_value());
-        cx.add_attr_to_element(&"y".into(), &self.y0.into_attr_value());
         let size = self.size();
-        cx.add_attr_to_element(&"width".into(), &size.width.into_attr_value());
-        cx.add_attr_to_element(&"height".into(), &size.height.into_attr_value());
-        let (el, props) = cx.build_element(SVG_NS, "rect");
-        let id = Id::next();
-        (id, props, el)
+
+        let attributes = vec_map![
+            Cow::from("x") => AttributeValue::F64(self.x0),
+            Cow::from("y") => AttributeValue::F64(self.y0),
+            Cow::from("width") => AttributeValue::F64(size.width),
+            Cow::from("height") => AttributeValue::F64(size.height),
+        ];
+        build_element(cx.document(), "rect", attributes)
     }
 
     fn rebuild(
         &self,
-        cx: &mut Cx,
+        _cx: &mut Cx,
         _prev: &Self,
         _id: &mut Id,
         props: &mut Self::State,
         element: &mut Self::Element,
     ) -> ChangeFlags {
-        cx.add_attr_to_element(&"x".into(), &self.x0.into_attr_value());
-        cx.add_attr_to_element(&"y".into(), &self.y0.into_attr_value());
         let size = self.size();
-        cx.add_attr_to_element(&"width".into(), &size.width.into_attr_value());
-        cx.add_attr_to_element(&"height".into(), &size.height.into_attr_value());
-        cx.rebuild_element(element, props)
+        props.set_attribute(None, &"x".into(), &self.x0.into_attr_value());
+        props.set_attribute(None, &"y".into(), &self.y0.into_attr_value());
+        props.set_attribute(None, &"width".into(), &size.width.into_attr_value());
+        props.set_attribute(None, &"height".into(), &size.height.into_attr_value());
+        props.apply_changes(element)
     }
 
     fn message(
@@ -119,33 +144,32 @@ generate_dom_interface_impl!(SvgCircleElement, (Circle));
 crate::interfaces::for_all_svg_circle_element_ancestors!(generate_dom_interface_impl, (Circle));
 
 impl ViewMarker for Circle {}
-impl Sealed for Circle {}
 
 impl<T, A> View<T, A> for Circle {
-    type State = HtmlProps;
+    type State = ElementProps;
     type Element = web_sys::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        cx.add_attr_to_element(&"cx".into(), &self.center.x.into_attr_value());
-        cx.add_attr_to_element(&"cy".into(), &self.center.y.into_attr_value());
-        cx.add_attr_to_element(&"r".into(), &self.radius.into_attr_value());
-        let (el, props) = cx.build_element(SVG_NS, "circle");
-        let id = Id::next();
-        (id, props, el)
+        let attributes = vec_map![
+            Cow::from("cx") => AttributeValue::F64(self.center.x),
+            Cow::from("cy") => AttributeValue::F64(self.center.y),
+            Cow::from("r") => AttributeValue::F64(self.radius),
+        ];
+        build_element(cx.document(), "circle", attributes)
     }
 
     fn rebuild(
         &self,
-        cx: &mut Cx,
+        _cx: &mut Cx,
         _prev: &Self,
         _id: &mut Id,
         props: &mut Self::State,
         element: &mut Self::Element,
     ) -> ChangeFlags {
-        cx.add_attr_to_element(&"cx".into(), &self.center.x.into_attr_value());
-        cx.add_attr_to_element(&"cy".into(), &self.center.y.into_attr_value());
-        cx.add_attr_to_element(&"r".into(), &self.radius.into_attr_value());
-        cx.rebuild_element(element, props)
+        props.set_attribute(None, &"cx".into(), &self.center.x.into_attr_value());
+        props.set_attribute(None, &"cy".into(), &self.center.y.into_attr_value());
+        props.set_attribute(None, &"r".into(), &self.radius.into_attr_value());
+        props.apply_changes(element)
     }
 
     fn message(
@@ -162,35 +186,62 @@ impl<T, A> View<T, A> for Circle {
 generate_dom_interface_impl!(SvgPathElement, (BezPath));
 crate::interfaces::for_all_svg_path_element_ancestors!(generate_dom_interface_impl, (BezPath));
 
+pub struct BezPathState {
+    path_value: AttributeValue,
+    props: ElementProps,
+}
+
+impl crate::interfaces::ElementProps for BezPathState {
+    fn set_attribute(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        name: &Cow<'static, str>,
+        value: &Option<AttributeValue>,
+    ) {
+        self.props.set_attribute(element, name, value);
+    }
+
+    fn set_class(&mut self, element: Option<&web_sys::Element>, class: Cow<'static, str>) {
+        self.props.set_class(element, class);
+    }
+
+    fn set_style(
+        &mut self,
+        element: Option<&web_sys::Element>,
+        key: Cow<'static, str>,
+        value: Cow<'static, str>,
+    ) {
+        self.props.set_style(element, key, value);
+    }
+}
+
 impl ViewMarker for BezPath {}
-impl Sealed for BezPath {}
 
 impl<T, A> View<T, A> for BezPath {
-    type State = (Cow<'static, str>, HtmlProps);
+    type State = BezPathState;
     type Element = web_sys::Element;
 
     fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
-        let svg_repr = Cow::from(self.to_svg());
-        cx.add_attr_to_element(&"d".into(), &svg_repr.clone().into_attr_value());
-        let (el, props) = cx.build_element(SVG_NS, "path");
-        let id = Id::next();
-        (id, (svg_repr, props), el)
+        let path_value = AttributeValue::String(Cow::from(self.to_svg()));
+        let attributes = vec_map![ Cow::from("d") => path_value.clone() ];
+        let (id, props, el) = build_element(cx.document(), "path", attributes);
+        (id, BezPathState { path_value, props }, el)
     }
 
     fn rebuild(
         &self,
-        cx: &mut Cx,
+        _cx: &mut Cx,
         prev: &Self,
         _id: &mut Id,
-        (svg_repr, props): &mut Self::State,
+        BezPathState { path_value, props }: &mut Self::State,
         element: &mut Self::Element,
     ) -> ChangeFlags {
         // slight optimization to avoid serialization/allocation
         if self != prev {
-            *svg_repr = Cow::from(self.to_svg());
+            *path_value = AttributeValue::String(Cow::from(self.to_svg()));
         }
-        cx.add_attr_to_element(&"d".into(), &svg_repr.clone().into_attr_value());
-        cx.rebuild_element(element, props)
+        props.set_attribute(None, &"d".into(), &Some(path_value.clone()));
+        props.apply_changes(element)
     }
 
     fn message(
diff --git a/crates/xilem_web/src/vecmap.rs b/crates/xilem_web/src/vecmap.rs
index 10d1ddfe40..9ada75be5c 100644
--- a/crates/xilem_web/src/vecmap.rs
+++ b/crates/xilem_web/src/vecmap.rs
@@ -34,10 +34,10 @@ impl<K, V> VecMap<K, V> {
     /// assert_eq!(map.get(&1), Some(&"a"));
     /// assert_eq!(map.get(&2), None);
     /// ```
-    pub fn get<Q: ?Sized>(&self, key: &Q) -> Option<&V>
+    pub fn get<Q>(&self, key: &Q) -> Option<&V>
     where
         K: Borrow<Q> + PartialEq,
-        Q: PartialEq,
+        Q: PartialEq + ?Sized,
     {
         self.0
             .iter()
@@ -60,10 +60,10 @@ impl<K, V> VecMap<K, V> {
     /// assert!(map.contains_key(&1));
     /// assert!(!map.contains_key(&2));
     /// ```
-    pub fn contains_key<Q: ?Sized>(&self, key: &Q) -> bool
+    pub fn contains_key<Q>(&self, key: &Q) -> bool
     where
         K: Borrow<Q> + Ord,
-        Q: Ord,
+        Q: Ord + ?Sized,
     {
         self.get(key).is_some()
     }
@@ -87,10 +87,10 @@ impl<K, V> VecMap<K, V> {
     /// assert_eq!(map[&1], "b");
     /// ```
     // See `get` for implementation notes, this is basically a copy-paste with mut's added
-    pub fn get_mut<Q: ?Sized>(&mut self, key: &Q) -> Option<&mut V>
+    pub fn get_mut<Q>(&mut self, key: &Q) -> Option<&mut V>
     where
         K: Borrow<Q> + Ord,
-        Q: Ord,
+        Q: Ord + ?Sized,
     {
         self.0
             .iter_mut()
@@ -197,10 +197,10 @@ impl<K, V> VecMap<K, V> {
     /// assert_eq!(map.remove(&1), Some("a"));
     /// assert_eq!(map.remove(&1), None);
     /// ```
-    pub fn remove<Q: ?Sized>(&mut self, key: &Q) -> Option<V>
+    pub fn remove<Q>(&mut self, key: &Q) -> Option<V>
     where
         K: Borrow<Q> + Ord,
-        Q: Ord,
+        Q: Ord + ?Sized,
     {
         // TODO not sure whether just a simple find is better here? Probably needs more benching
         match self.0.binary_search_by_key(&key, |(k, _)| k.borrow()) {
@@ -276,6 +276,21 @@ impl<'a, K, V> IntoIterator for &'a VecMap<K, V> {
     }
 }
 
+macro_rules! vec_map {
+    [@single $($x:tt)*] => (());
+    [@count $($rest:expr),*] => (<[()]>::len(&[$(vec_map!(@single $rest)),*]));
+
+    [$($key:expr => $value:expr,)+] => { vec_map!($($key => $value),+) };
+    [$($key:expr => $value:expr),*] => {{
+        let mut _map = $crate::vecmap::VecMap::default();
+        $(
+            let _ = _map.insert($key, $value);
+        )*
+        _map
+    }};
+}
+pub(crate) use vec_map;
+
 // Basically all the doc tests from the rustdoc examples above, to avoid having to expose this module (pub)
 #[cfg(test)]
 mod tests {
@@ -283,24 +298,21 @@ mod tests {
 
     #[test]
     fn get() {
-        let mut map = VecMap::default();
-        map.insert(1, "a");
+        let map = vec_map![1 => "a"];
         assert_eq!(map.get(&1), Some(&"a"));
         assert_eq!(map.get(&2), None);
     }
 
     #[test]
     fn contains_key() {
-        let mut map = VecMap::default();
-        map.insert(1, "a");
+        let map = vec_map![1 => "a"];
         assert!(map.contains_key(&1));
         assert!(!map.contains_key(&2));
     }
 
     #[test]
     fn get_mut() {
-        let mut map = VecMap::default();
-        map.insert(1, "a");
+        let mut map = vec_map![1 => "a"];
         if let Some(x) = map.get_mut(&1) {
             *x = "b";
         }
@@ -309,19 +321,14 @@ mod tests {
 
     #[test]
     fn keys() {
-        let mut a = VecMap::default();
-        a.insert(2, "b");
-        a.insert(1, "a");
-        let keys: Vec<_> = a.keys().cloned().collect();
+        let map = vec_map![2 => "b", 1 => "a"];
+        let keys: Vec<_> = map.keys().cloned().collect();
         assert_eq!(keys, [1, 2]);
     }
 
     #[test]
     fn iter() {
-        let mut map = VecMap::default();
-        map.insert(3, "c");
-        map.insert(2, "b");
-        map.insert(1, "a");
+        let map = vec_map![3 => "c", 2 => "b", 1 => "a"];
         for (key, value) in map.iter() {
             println!("{key}: {value}");
         }