Allow tag to be set only on the root node

Author: frmdstryr

CHANGELOG.md

@@ -1,6 +1,6 @@
 # 0.13.0
 - **BREAKING** Refactor Tag and implementation to significantly reduce memory usage
-- The Tag's `tag` is now a ClassVar instead of an atom member. Use a subclass to change tags.
+- The Tag's `tag` is now a ClassVar instead of an atom member. Only the tag of the "root" html node can be changed per instance. Use a subclass to change tags of child nodes.
 - The Tag's `clickable` and `draggable` are now removed. `clickable` is automatically inferred if a `clicked` handler is defined. `draggable` is inferred if `dragstart` is defined. 
 - Due to their minimal usage `onclick`, `ondragstart`, `ondragover`, `ondragend`, `ondragenter` and `ondragleave` are removed. Use
 the `attrs` dict to define these instead.

tests/test_html.py

@@ -157,6 +157,23 @@ def test_html_change(app, tag, attr, default, change, query):
     assert len(view.proxy.widget.xpath(query)) == 1
 
 
+def test_root_tag_render(app):
+    """Test rendering a root component with a custom tag"""
+    source = dedent(
+        """
+    from web.components.api import *
+
+    enamldef Toast(Html):
+        tag = "toast"
+    """
+    )
+    print(source)
+    Toast = compile_source(source, "Toast")
+    toast = Toast()
+    print(toast.render())
+    assert len(toast.proxy.widget.xpath("//toast")) == 1
+
+
 def test_tag_proxy(app):
     # To make cov happy
     from web.components.html import ProxyTag

web/components/html.py

@@ -301,10 +301,12 @@ def render(
 
 
 class Html(Tag):
+    """Html is a root tag. It can be created without a parent and handles all modified events"""
+
     __slots__ = ("__weakref__",)
 
-    #: Set the tag name
-    tag = "html"
+    #: The xml tag of the root node.
+    tag = d_(Str("html"))
 
     #: Dom modified event. This will fire when any child node is updated, added
     #: or removed. Observe this event to handle updating websockets.