@pyscript/core 0.4.55 → 0.5.0-rc1

package/src/stdlib/pyscript/web/elements.py

@@ -1,3 +1,4 @@
+# noinspection PyPep8Naming
 import inspect
 import sys
 
@@ -18,23 +19,7 @@ except ImportError:
             print("WARNING: ", *args, **kwargs)
 
 
-try:
-    from functools import cached_property
-except ImportError:
-    # TODO: same comment about micropython as above
-    cached_property = property
-
-try:
-    from pyodide.ffi import JsProxy
-except ImportError:
-    # TODO: same comment about micropython as above
-    def JsProxy(obj):
-        return obj
-
-
-from pyscript import document, window
-
-# from pyscript.web import dom as pydom
+from pyscript import document
 
 #: A flag to show if MicroPython is the current Python interpreter.
 is_micropython = "MicroPython" in sys.version
@@ -49,330 +34,331 @@ def getmembers_static(cls):
     return inspect.getmembers_static(cls)
 
 
-class JSProperty:
-    """JS property descriptor that directly maps to the property with the same
-    name in the underlying JS component."""
+class DOMProperty:
+    """A descriptor representing a DOM property on an `Element` instance.
+
+    This maps a property on an `Element` instance, to the property with the specified
+    name on the element's underlying DOM element.
+    """
 
     def __init__(self, name: str, allow_nones: bool = False):
         self.name = name
         self.allow_nones = allow_nones
 
     def __get__(self, obj, objtype=None):
-        return getattr(obj._js, self.name)
+        return getattr(obj._dom_element, self.name)
 
     def __set__(self, obj, value):
         if not self.allow_nones and value is None:
             return
-        setattr(obj._js, self.name, value)
+        setattr(obj._dom_element, self.name, value)
 
 
-# ------ TODO: REMOVE!!!! pydom elements
+class Element:
+    tag = "div"
 
+    # These are attribute that all elements have (this list is a subset of the official
+    # one - we are just trying to capture the most used ones).
+    accesskey = DOMProperty("accesskey")
+    autofocus = DOMProperty("autofocus")
+    autocapitalize = DOMProperty("autocapitalize")
+    className = DOMProperty("className")
+    contenteditable = DOMProperty("contenteditable")
+    draggable = DOMProperty("draggable")
+    enterkeyhint = DOMProperty("enterkeyhint")
+    hidden = DOMProperty("hidden")
+    innerHTML = DOMProperty("innerHTML")
+    id = DOMProperty("id")
+    lang = DOMProperty("lang")
+    nonce = DOMProperty("nonce")
+    part = DOMProperty("part")
+    popover = DOMProperty("popover")
+    slot = DOMProperty("slot")
+    spellcheck = DOMProperty("spellcheck")
+    tabindex = DOMProperty("tabindex")
+    tagName = DOMProperty("tagName")
+    textContent = DOMProperty("textContent")
+    title = DOMProperty("title")
+    translate = DOMProperty("translate")
+    virtualkeyboardpolicy = DOMProperty("virtualkeyboardpolicy")
+
+    @classmethod
+    def from_dom_element(cls, dom_element):
+        """Create an instance of the appropriate subclass of `Element` for a DOM
+        element.
+
+        If the DOM element was created via an `Element` (i.e. by us) it will have a data
+        attribute named `data-pyscript-type` that contains the name of the subclass
+        that created it. Hence, if the `data-pyscript-type` attribute *is* present we
+        look up the subclass by name and create an instance of that. Otherwise, we make
+        a 'best-guess' and look up the `Element` subclass by the DOM element's tag name
+        (this is NOT fool-proof as many subclasses might use a `<div>`, but close enough
+        for jazz).
+        """
 
-class BaseElement:
-    def __init__(self, js_element):
-        self._js = js_element
-        self._parent = None
-        self.style = StyleProxy(self)
-        self._proxies = {}
+        # We use "getAttribute" here instead of `js_element.dataset.pyscriptType` as the
+        # latter throws an `AttributeError` if the value isn't set. This way we just get
+        # `None` which seems cleaner.
+        cls_name = dom_element.getAttribute("data-pyscript-type")
+        if cls_name:
+            element_cls = ELEMENT_CLASSES_BY_NAME.get(cls_name.lower())
 
-    def __eq__(self, obj):
-        """Check if the element is the same as the other element by comparing
-        the underlying JS element"""
-        return isinstance(obj, BaseElement) and obj._js == self._js
+        else:
+            element_cls = ELEMENT_CLASSES_BY_TAG.get(dom_element.tagName.lower())
 
-    @property
-    def parent(self):
-        if self._parent:
-            return self._parent
+        # For any unknown elements (custom tags etc.) create an instance of this
+        # class ('Element').
+        if not element_cls:
+            element_cls = cls
 
-        if self._js.parentElement:
-            # TODO: This should actually return the correct class (== to tagName)
-            self._parent = Element(self._js.parentElement)
+        return element_cls(dom_element=dom_element)
 
-        return self._parent
+    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):
+        """Create a new, or wrap an existing DOM element.
 
-    # @property
-    # def __class(self):
-    #     return self.__class__ if self.__class__ != PyDom else Element
+        If `dom_element` is None we are being called to *create* a new element.
+        Otherwise, we are being called to *wrap* an existing DOM element.
+        """
+        self._dom_element = dom_element or document.createElement(self.tag)
 
-    def create(self, type_, is_child=True, classes=None, html=None, label=None):
-        js_el = document.createElement(type_)
-        element = self.__class(js_el)
+        # Tag the DOM element with our class name.
+        #
+        # Using the `dataset` attribute is how you programmatically add `data-xxx`
+        # attributes to a DOM element. In this case it will set an attribute that
+        # appears in the DOM as `data-pyscript-type`.
+        self._dom_element.dataset.pyscriptType = type(self).__name__
 
-        if classes:
-            for class_ in classes:
-                element.add_class(class_)
+        self._parent = None
+        self._classes = Classes(self)
+        self._style = Style(self)
 
-        if html is not None:
-            element.html = html
+        # Set any specified classes, styles, and DOM properties.
+        self.update(classes=classes, style=style, **kwargs)
 
-        if label is not None:
-            element.label = label
+    def update(self, classes=None, style=None, **kwargs):
+        """Update the element with the specified classes, styles, and DOM properties."""
 
-        if is_child:
-            self.append(element)
+        if classes:
+            self.classes.add(classes)
 
-        return element
+        if isinstance(style, dict):
+            self.style.set(**style)
 
-    def find(self, selector):
-        """Return an ElementCollection representing all the child elements that
-        match the specified selector.
+        elif style is not None:
+            raise ValueError(
+                f"Style should be a dictionary, received {style} "
+                f"(type {type(style)}) instead."
+            )
 
-        Args:
-            selector (str): A string containing a selector expression
+        self._set_dom_properties(**kwargs)
 
-        Returns:
-            ElementCollection: A collection of elements matching the selector
+    def _set_dom_properties(self, **kwargs):
+        """Set the specified DOM properties.
+
+        Args:
+            **kwargs: The properties to set
         """
-        elements = self._js.querySelectorAll(selector)
-        if not elements:
-            return None
-        return ElementCollection([Element(el) for el in elements])
+        # Harvest all DOM properties from the instance's class.
+        dom_properties = {
+            attribute_name: attribute_value
+            for attribute_name, attribute_value in getmembers_static(self.__class__)
+            if isinstance(attribute_value, DOMProperty)
+        }
+
+        for name, value in kwargs.items():
+            if name not in dom_properties:
+                raise ValueError(f"'{name}' is not a DOM property.")
+
+            try:
+                setattr(self, name, value)
+            except Exception as e:
+                print(f"Error setting {name} to {value}: {e}")
+                raise
 
+    def __eq__(self, obj):
+        """Check for equality by comparing the underlying DOM element."""
+        return isinstance(obj, Element) and obj._dom_element == self._dom_element
 
-class Element(BaseElement):
     @property
     def children(self):
-        return [self.__class__(el) for el in self._js.children]
+        return ElementCollection(
+            [Element.from_dom_element(el) for el in self._dom_element.children]
+        )
 
-    def append(self, child):
-        # TODO: this is Pyodide specific for now!!!!!!
-        # if we get passed a JSProxy Element directly we just map it to the
-        # higher level Python element
-        if inspect.isclass(JsProxy) and isinstance(child, JsProxy):
-            return self.append(Element(child))
-
-        elif isinstance(child, Element):
-            self._js.appendChild(child._js)
-
-            return child
-
-        elif isinstance(child, ElementCollection):
-            for el in child:
-                self.append(el)
+    @property
+    def classes(self):
+        return self._classes
 
-    # -------- Pythonic Interface to Element -------- #
     @property
-    def html(self):
-        return self._js.innerHTML
+    def parent(self):
+        if self._parent:
+            return self._parent
+
+        if self._dom_element.parentElement:
+            self._parent = Element.from_dom_element(self._dom_element.parentElement)
 
-    @html.setter
-    def html(self, value):
-        self._js.innerHTML = value
+        return self._parent
 
     @property
-    def text(self):
-        return self._js.textContent
+    def style(self):
+        return self._style
 
-    @text.setter
-    def text(self, value):
-        self._js.textContent = value
+    def append(self, child):
+        if isinstance(child, Element):
+            self._dom_element.appendChild(child._dom_element)
 
-    @property
-    def content(self):
-        # TODO: This breaks with with standard template elements. Define how to best
-        #       handle this specifica use case. Just not support for now?
-        if self._js.tagName == "TEMPLATE":
-            warnings.warn(
-                "Content attribute not supported for template elements.", stacklevel=2
-            )
-            return None
-        return self._js.innerHTML
-
-    @content.setter
-    def content(self, value):
-        # TODO: (same comment as above)
-        if self._js.tagName == "TEMPLATE":
-            warnings.warn(
-                "Content attribute not supported for template elements.", stacklevel=2
-            )
-            return
+        elif isinstance(child, ElementCollection):
+            for el in child:
+                self._dom_element.appendChild(el._dom_element)
 
-        display(value, target=self.id)
+        else:
+            # In this case we know it's not an Element or an ElementCollection, so we
+            # guess that it's either a DOM element or NodeList returned via the ffi.
+            try:
+                # First, we try to see if it's an element by accessing the 'tagName'
+                # attribute.
+                child.tagName
+                self._dom_element.appendChild(child)
+
+            except AttributeError:
+                try:
+                    # Ok, it's not an element, so let's see if it's a NodeList by
+                    # accessing the 'length' attribute.
+                    child.length
+                    for element_ in child:
+                        self._dom_element.appendChild(element_)
+
+                except AttributeError:
+                    # Nope! This is not an element or a NodeList.
+                    raise TypeError(
+                        f'Element "{child}" is a proxy object, "'
+                        f"but not a valid element or a NodeList."
+                    )
+
+    def clone(self, clone_id=None):
+        """Make a clone of the element (clones the underlying DOM object too)."""
+        clone = Element.from_dom_element(self._dom_element.cloneNode(True))
+        clone.id = clone_id
+        return clone
 
-    @property
-    def id(self):
-        return self._js.id
+    def find(self, selector):
+        """Return an ElementCollection representing all the child elements that
+        match the specified selector.
 
-    @id.setter
-    def id(self, value):
-        self._js.id = value
+        Args:
+            selector (str): A string containing a selector expression
 
-    @property
-    def options(self):
-        if "options" in self._proxies:
-            return self._proxies["options"]
+        Returns:
+            ElementCollection: A collection of elements matching the selector
+        """
+        return ElementCollection(
+            [
+                Element.from_dom_element(dom_element)
+                for dom_element in self._dom_element.querySelectorAll(selector)
+            ]
+        )
 
-        if not self._js.tagName.lower() in {"select", "datalist", "optgroup"}:
-            raise AttributeError(
-                f"Element {self._js.tagName} has no options attribute."
-            )
-        self._proxies["options"] = OptionsProxy(self)
-        return self._proxies["options"]
+    def show_me(self):
+        """Scroll the element into view."""
+        self._dom_element.scrollIntoView()
 
-    @property
-    def value(self):
-        return self._js.value
-
-    @value.setter
-    def value(self, value):
-        # in order to avoid confusion to the user, we don't allow setting the
-        # value of elements that don't have a value attribute
-        if not hasattr(self._js, "value"):
-            raise AttributeError(
-                f"Element {self._js.tagName} has no value attribute. If you want to "
-                "force a value attribute, set it directly using the `_js.value = <value>` "
-                "javascript API attribute instead."
-            )
-        self._js.value = value
 
-    @property
-    def selected(self):
-        return self._js.selected
-
-    @selected.setter
-    def selected(self, value):
-        # in order to avoid confusion to the user, we don't allow setting the
-        # value of elements that don't have a value attribute
-        if not hasattr(self._js, "selected"):
-            raise AttributeError(
-                f"Element {self._js.tagName} has no value attribute. If you want to "
-                "force a value attribute, set it directly using the `_js.value = <value>` "
-                "javascript API attribute instead."
-            )
-        self._js.selected = value
+class Classes:
+    """A set-like interface to an element's `classList`."""
 
-    def clone(self, new_id=None):
-        clone = Element(self._js.cloneNode(True))
-        clone.id = new_id
+    def __init__(self, element: Element):
+        self._element = element
+        self._class_list = self._element._dom_element.classList
 
-        return clone
+    def __contains__(self, item):
+        return item in self._class_list
 
-    def remove_class(self, classname):
-        classList = self._js.classList
-        if isinstance(classname, list):
-            classList.remove(*classname)
-        else:
-            classList.remove(classname)
-        return self
+    def __eq__(self, other):
+        # We allow comparison with either another `Classes` instance...
+        if isinstance(other, Classes):
+            compare_with = list(other._class_list)
 
-    def add_class(self, classname):
-        classList = self._js.classList
-        if isinstance(classname, list):
-            classList.add(*classname)
+        # ...or iterables of strings.
         else:
-            self._js.classList.add(classname)
-        return self
+            # TODO: Check MP for existence of better iterable test.
+            try:
+                compare_with = iter(other)
 
-    @property
-    def classes(self):
-        classes = self._js.classList.values()
-        return [x for x in classes]
+            except TypeError:
+                return False
 
-    def show_me(self):
-        self._js.scrollIntoView()
+        return set(self._class_list) == set(compare_with)
 
-    def snap(
-        self,
-        to: BaseElement | str = None,
-        width: int | None = None,
-        height: int | None = None,
-    ):
-        """
-        Captures a snapshot of a video element. (Only available for video elements)
+    def __iter__(self):
+        return iter(self._class_list)
 
-        Inputs:
+    def __len__(self):
+        return self._class_list.length
 
-            * to: element where to save the snapshot of the video frame to
-            * width: width of the image
-            * height: height of the image
+    def __repr__(self):
+        return f"Classes({', '.join(self._class_list)})"
 
-        Output:
-            (Element) canvas element where the video frame snapshot was drawn into
-        """
-        if self._js.tagName != "VIDEO":
-            raise AttributeError("Snap method is only available for video Elements")
+    def __str__(self):
+        return " ".join(self._class_list)
 
-        if to is None:
-            canvas = self.create("canvas")
-            if width is None:
-                width = self._js.width
-            if height is None:
-                height = self._js.height
-            canvas._js.width = width
-            canvas._js.height = height
+    def add(self, *class_names):
+        for class_name in class_names:
+            if isinstance(class_name, list):
+                for item in class_name:
+                    self.add(item)
 
-        elif isinstance(to, Element):
-            if to._js.tagName != "CANVAS":
-                raise TypeError("Element to snap to must a canvas.")
-            canvas = to
-        elif getattr(to, "tagName", "") == "CANVAS":
-            canvas = Element(to)
-        elif isinstance(to, str):
-            # TODO (fpliger): This needs a better fix but doing a local import here for a quick fix
-            from pyscript.web import dom
+            else:
+                self._class_list.add(class_name)
 
-            canvas = dom[to][0]
-            if canvas._js.tagName != "CANVAS":
-                raise TypeError("Element to snap to must a be canvas.")
+    def contains(self, class_name):
+        return class_name in self
 
-        canvas.draw(self, width, height)
+    def remove(self, *class_names):
+        for class_name in class_names:
+            if isinstance(class_name, list):
+                for item in class_name:
+                    self.remove(item)
 
-        return canvas
+            else:
+                self._class_list.remove(class_name)
 
-    def download(self, filename: str = "snapped.png") -> None:
-        """Download the current element (only available for canvas elements) with the filename
-        provided in input.
+    def replace(self, old_class, new_class):
+        self.remove(old_class)
+        self.add(new_class)
 
-        Inputs:
-            * filename (str): name of the file being downloaded
+    def toggle(self, *class_names):
+        for class_name in class_names:
+            if class_name in self:
+                self.remove(class_name)
 
-        Output:
-            None
-        """
-        if self._js.tagName != "CANVAS":
-            raise AttributeError(
-                "The download method is only available for canvas Elements"
-            )
+            else:
+                self.add(class_name)
 
-        link = self.create("a")
-        link._js.download = filename
-        link._js.href = self._js.toDataURL()
-        link._js.click()
 
-    def draw(self, what, width, height):
-        """Draw `what` on the current element  (only available for canvas elements).
+class HasOptions:
+    """Mix-in for elements that have an options attribute.
 
-        Inputs:
+    The elements that support options are: <datalist>, <optgroup>, and <select>.
+    """
 
-            * what (canvas image source): An element to draw into the context. The specification permits any canvas
-                image source, specifically, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement,
-                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a VideoFrame.
-        """
-        if self._js.tagName != "CANVAS":
-            raise AttributeError(
-                "The draw method is only available for canvas Elements"
-            )
+    @property
+    def options(self):
+        if not hasattr(self, "_options"):
+            self._options = Options(self)
 
-        if isinstance(what, Element):
-            what = what._js
+        return self._options
 
-        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
-        self._js.getContext("2d").drawImage(what, 0, 0, width, height)
 
+class Options:
+    """This class represents the <option>s of a <datalist>, <optgroup> or <select>
+    element.
 
-class OptionsProxy:
-    """This class represents the options of a select element. It
-    allows to access to add and remove options by using the `add` and `remove` methods.
+    It allows to access to add and remove <option>s by using the `add` and `remove`
+    methods.
     """
 
     def __init__(self, element: Element) -> None:
         self._element = element
-        if self._element._js.tagName.lower() != "select":
-            raise AttributeError(
-                f"Element {self._element._js.tagName} has no options attribute."
-            )
 
     def add(
         self,
@@ -383,7 +369,7 @@ class OptionsProxy:
         **kws,
     ) -> None:
         """Add a new option to the select element"""
-        # create the option element and set the attributes
+
         option = document.createElement("option")
         if value is not None:
             kws["value"] = value
@@ -397,13 +383,13 @@ class OptionsProxy:
 
         if before:
             if isinstance(before, Element):
-                before = before._js
+                before = before._dom_element
 
-        self._element._js.add(option, before)
+        self._element._dom_element.add(option, before)
 
     def remove(self, item: int) -> None:
         """Remove the option at the specified index"""
-        self._element._js.remove(item)
+        self._element._dom_element.remove(item)
 
     def clear(self) -> None:
         """Remove all the options"""
@@ -413,12 +399,14 @@ class OptionsProxy:
     @property
     def options(self):
         """Return the list of options"""
-        return [Element(opt) for opt in self._element._js.options]
+        return [
+            Element.from_dom_element(opt) for opt in self._element._dom_element.options
+        ]
 
     @property
     def selected(self):
         """Return the selected option"""
-        return self.options[self._element._js.selectedIndex]
+        return self.options[self._element._dom_element.selectedIndex]
 
     def __iter__(self):
         yield from self.options
@@ -433,13 +421,12 @@ class OptionsProxy:
         return self.options[key]
 
 
-class StyleProxy:  # (dict):
+class Style:
+    """A dict-like interface to an element's css style."""
+
     def __init__(self, element: Element) -> None:
         self._element = element
-
-    @cached_property
-    def _style(self):
-        return self._element._js.style
+        self._style = self._element._dom_element.style
 
     def __getitem__(self, key):
         return self._style.getPropertyValue(key)
@@ -450,944 +437,1039 @@ class StyleProxy:  # (dict):
     def remove(self, key):
         self._style.removeProperty(key)
 
-    def set(self, **kws):
-        for k, v in kws.items():
-            self._element._js.style.setProperty(k, v)
+    def set(self, **kwargs):
+        for key, value in kwargs.items():
+            self._element._dom_element.style.setProperty(key, value)
 
     # CSS Properties
     # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2
-    # Following prperties automatically generated from the above reference using
+    # Following properties automatically generated from the above reference using
     # tools/codegen_css_proxy.py
     @property
     def visible(self):
-        return self._element._js.style.visibility
+        return self._element._dom_element.style.visibility
 
     @visible.setter
     def visible(self, value):
-        self._element._js.style.visibility = value
+        self._element._dom_element.style.visibility = value
 
 
-# --------- END OF PYDOM STUFF ------
+class ContainerElement(Element):
+    """Base class for elements that can contain other elements."""
 
+    def __init__(
+        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs
+    ):
+        super().__init__(
+            dom_element=dom_element, style=style, classes=classes, **kwargs
+        )
 
-class ElementBase(Element):
-    tag = "div"
+        for child in list(args) + (children or []):
+            if isinstance(child, Element) or isinstance(child, ElementCollection):
+                self.append(child)
 
-    # GLOBAL ATTRIBUTES
-    # These are attribute that all elements have (this list is a subset of the official one)
-    # We are trying to capture the most used ones
-    accesskey = JSProperty("accesskey")
-    autofocus = JSProperty("autofocus")
-    autocapitalize = JSProperty("autocapitalize")
-    className = JSProperty("className")
-    contenteditable = JSProperty("contenteditable")
-    draggable = JSProperty("draggable")
-    enterkeyhint = JSProperty("enterkeyhint")
-    hidden = JSProperty("hidden")
-    id = JSProperty("id")
-    lang = JSProperty("lang")
-    nonce = JSProperty("nonce")
-    part = JSProperty("part")
-    popover = JSProperty("popover")
-    slot = JSProperty("slot")
-    spellcheck = JSProperty("spellcheck")
-    tabindex = JSProperty("tabindex")
-    title = JSProperty("title")
-    translate = JSProperty("translate")
-    virtualkeyboardpolicy = JSProperty("virtualkeyboardpolicy")
-
-    def __init__(self, style=None, **kwargs):
-        super().__init__(document.createElement(self.tag))
-
-        # set all the style properties provided in input
-        if isinstance(style, dict):
-            for key, value in style.items():
-                self.style[key] = value
-        elif style is None:
-            pass
-        else:
-            raise ValueError(
-                f"Style should be a dictionary, received {style} (type {type(style)}) instead."
-            )
-
-        # IMPORTANT!!! This is used to auto-harvest all input arguments and set them as properties
-        self._init_properties(**kwargs)
+            else:
+                self.innerHTML += child
 
-    def _init_properties(self, **kwargs):
-        """Set all the properties (of type JSProperties) provided in input as properties
-        of the class instance.
 
-        Args:
-            **kwargs: The properties to set
-        """
-        # Look at all the properties of the class and see if they were provided in kwargs
-        for attr_name, attr in getmembers_static(self.__class__):
-            # For each one, actually check if it is a property of the class and set it
-            if isinstance(attr, JSProperty) and attr_name in kwargs:
-                try:
-                    setattr(self, attr_name, kwargs[attr_name])
-                except Exception as e:
-                    print(f"Error setting {attr_name} to {kwargs[attr_name]}: {e}")
-                    raise
-
-
-class TextElementBase(ElementBase):
-    def __init__(self, content=None, style=None, **kwargs):
-        super().__init__(style=style, **kwargs)
-
-        # If it's an element, append the element
-        if isinstance(content, Element):
-            self.append(content)
-        # If it's a list of elements
-        elif isinstance(content, list):
-            for item in content:
-                self.append(item)
-        # If the content wasn't set just ignore
-        elif content is None:
-            pass
-        else:
-            # Otherwise, set content as the html of the element
-            self.html = content
-
-
-# IMPORTANT: For all HTML components defined below, we are not mapping all
-# available attributes, just the global and the most common ones.
-# If you need to access a specific attribute, you can always use the `_js.<attribute>`
-class a(TextElementBase):
+# IMPORTANT: For all HTML components defined below, we are not mapping all possible
+# attributes, just the global and the most common ones. If you need to access a
+# specific attribute, you can always use the `_dom_element.<attribute>`
+class a(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"""
 
     tag = "a"
 
-    download = JSProperty("download")
-    href = JSProperty("href")
-    referrerpolicy = JSProperty("referrerpolicy")
-    rel = JSProperty("rel")
-    target = JSProperty("target")
-    type = JSProperty("type")
+    download = DOMProperty("download")
+    href = DOMProperty("href")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    rel = DOMProperty("rel")
+    target = DOMProperty("target")
+    type = DOMProperty("type")
 
 
-class abbr(TextElementBase):
+class abbr(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr"""
 
     tag = "abbr"
 
 
-class address(TextElementBase):
+class address(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address"""
 
     tag = "address"
 
 
-class area(ElementBase):
+class area(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area"""
 
     tag = "area"
 
-    alt = JSProperty("alt")
-    coords = JSProperty("coords")
-    download = JSProperty("download")
-    href = JSProperty("href")
-    ping = JSProperty("ping")
-    referrerpolicy = JSProperty("referrerpolicy")
-    rel = JSProperty("rel")
-    shape = JSProperty("shape")
-    target = JSProperty("target")
+    alt = DOMProperty("alt")
+    coords = DOMProperty("coords")
+    download = DOMProperty("download")
+    href = DOMProperty("href")
+    ping = DOMProperty("ping")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    rel = DOMProperty("rel")
+    shape = DOMProperty("shape")
+    target = DOMProperty("target")
 
 
-class article(TextElementBase):
+class article(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"""
 
     tag = "article"
 
 
-class aside(TextElementBase):
+class aside(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"""
 
     tag = "aside"
 
 
-class audio(ElementBase):
+class audio(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"""
 
     tag = "audio"
 
-    autoplay = JSProperty("autoplay")
-    controls = JSProperty("controls")
-    controlslist = JSProperty("controlslist")
-    crossorigin = JSProperty("crossorigin")
-    disableremoteplayback = JSProperty("disableremoteplayback")
-    loop = JSProperty("loop")
-    muted = JSProperty("muted")
-    preload = JSProperty("preload")
-    src = JSProperty("src")
+    autoplay = DOMProperty("autoplay")
+    controls = DOMProperty("controls")
+    controlslist = DOMProperty("controlslist")
+    crossorigin = DOMProperty("crossorigin")
+    disableremoteplayback = DOMProperty("disableremoteplayback")
+    loop = DOMProperty("loop")
+    muted = DOMProperty("muted")
+    preload = DOMProperty("preload")
+    src = DOMProperty("src")
 
 
-class b(TextElementBase):
+class b(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b"""
 
     tag = "b"
 
 
-class blockquote(TextElementBase):
+class base(Element):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"""
+
+    tag = "base"
+
+    href = DOMProperty("href")
+    target = DOMProperty("target")
+
+
+class blockquote(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"""
 
     tag = "blockquote"
 
-    cite = JSProperty("cite")
+    cite = DOMProperty("cite")
+
+
+class body(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body"""
 
+    tag = "body"
 
-class br(ElementBase):
+
+class br(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br"""
 
     tag = "br"
 
 
-class button(TextElementBase):
+class button(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"""
 
     tag = "button"
 
-    autofocus = JSProperty("autofocus")
-    disabled = JSProperty("disabled")
-    form = JSProperty("form")
-    formaction = JSProperty("formaction")
-    formenctype = JSProperty("formenctype")
-    formmethod = JSProperty("formmethod")
-    formnovalidate = JSProperty("formnovalidate")
-    formtarget = JSProperty("formtarget")
-    name = JSProperty("name")
-    type = JSProperty("type")
-    value = JSProperty("value")
+    autofocus = DOMProperty("autofocus")
+    disabled = DOMProperty("disabled")
+    form = DOMProperty("form")
+    formaction = DOMProperty("formaction")
+    formenctype = DOMProperty("formenctype")
+    formmethod = DOMProperty("formmethod")
+    formnovalidate = DOMProperty("formnovalidate")
+    formtarget = DOMProperty("formtarget")
+    name = DOMProperty("name")
+    type = DOMProperty("type")
+    value = DOMProperty("value")
 
 
-class canvas(TextElementBase):
+class canvas(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"""
 
     tag = "canvas"
 
-    height = JSProperty("height")
-    width = JSProperty("width")
+    height = DOMProperty("height")
+    width = DOMProperty("width")
+
+    def download(self, filename: str = "snapped.png") -> None:
+        """Download the current element with the filename provided in input.
+
+        Inputs:
+            * filename (str): name of the file being downloaded
+
+        Output:
+            None
+        """
+        download_link = a(download=filename, href=self._dom_element.toDataURL())
+
+        # Adding the link to the DOM is recommended for browser compatibility to make
+        # sure that the click works.
+        self.append(download_link)
 
+        download_link._dom_element.click()
 
-class caption(TextElementBase):
+    def draw(self, what, width=None, height=None):
+        """Draw `what` on the current element
+
+        Inputs:
+
+            * what (canvas image source): An element to draw into the context. The
+                specification permits any canvas image source, specifically, an
+                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,
+                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a
+                VideoFrame.
+        """
+        if isinstance(what, Element):
+            what = what._dom_element
+
+        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
+        ctx = self._dom_element.getContext("2d")
+        if width or height:
+            ctx.drawImage(what, 0, 0, width, height)
+
+        else:
+            ctx.drawImage(what, 0, 0)
+
+
+class caption(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption"""
 
     tag = "caption"
 
 
-class cite(TextElementBase):
+class cite(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite"""
 
     tag = "cite"
 
 
-class code(TextElementBase):
+class code(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code"""
 
     tag = "code"
 
 
-class data(TextElementBase):
+class col(Element):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col"""
+
+    tag = "col"
+
+    span = DOMProperty("span")
+
+
+class colgroup(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"""
+
+    tag = "colgroup"
+
+
+class data(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data"""
 
     tag = "data"
 
-    value = JSProperty("value")
+    value = DOMProperty("value")
 
 
-class datalist(TextElementBase):
+class datalist(ContainerElement, HasOptions):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"""
 
     tag = "datalist"
 
 
-class dd(TextElementBase):
+class dd(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd"""
 
     tag = "dd"
 
 
-class del_(TextElementBase):
+class del_(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del"""
 
     tag = "del"
 
-    cite = JSProperty("cite")
-    datetime = JSProperty("datetime")
+    cite = DOMProperty("cite")
+    datetime = DOMProperty("datetime")
 
 
-class details(TextElementBase):
+class details(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"""
 
     tag = "details"
 
-    open = JSProperty("open")
+    open = DOMProperty("open")
 
 
-class dialog(TextElementBase):
+class dialog(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"""
 
     tag = "dialog"
 
-    open = JSProperty("open")
+    open = DOMProperty("open")
 
 
-class div(TextElementBase):
+class div(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"""
 
     tag = "div"
 
 
-class dl(TextElementBase):
+class dl(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl"""
 
     tag = "dl"
 
-    value = JSProperty("value")
+    value = DOMProperty("value")
 
 
-class dt(TextElementBase):
+class dt(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt"""
 
     tag = "dt"
 
 
-class em(TextElementBase):
+class em(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em"""
 
     tag = "em"
 
 
-class embed(TextElementBase):
+class embed(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed"""
 
     tag = "embed"
 
-    height = JSProperty("height")
-    src = JSProperty("src")
-    type = JSProperty("type")
-    width = JSProperty("width")
+    height = DOMProperty("height")
+    src = DOMProperty("src")
+    type = DOMProperty("type")
+    width = DOMProperty("width")
 
 
-class fieldset(TextElementBase):
+class fieldset(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset"""
 
     tag = "fieldset"
 
-    disabled = JSProperty("disabled")
-    form = JSProperty("form")
-    name = JSProperty("name")
+    disabled = DOMProperty("disabled")
+    form = DOMProperty("form")
+    name = DOMProperty("name")
 
 
-class figcaption(TextElementBase):
+class figcaption(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption"""
 
     tag = "figcaption"
 
 
-class figure(TextElementBase):
+class figure(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure"""
 
     tag = "figure"
 
 
-class footer(TextElementBase):
+class footer(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer"""
 
     tag = "footer"
 
 
-class form(TextElementBase):
+class form(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"""
 
     tag = "form"
 
-    accept_charset = JSProperty("accept-charset")
-    action = JSProperty("action")
-    autocapitalize = JSProperty("autocapitalize")
-    autocomplete = JSProperty("autocomplete")
-    enctype = JSProperty("enctype")
-    name = JSProperty("name")
-    method = JSProperty("method")
-    nonvalidate = JSProperty("nonvalidate")
-    rel = JSProperty("rel")
-    target = JSProperty("target")
+    accept_charset = DOMProperty("accept-charset")
+    action = DOMProperty("action")
+    autocapitalize = DOMProperty("autocapitalize")
+    autocomplete = DOMProperty("autocomplete")
+    enctype = DOMProperty("enctype")
+    name = DOMProperty("name")
+    method = DOMProperty("method")
+    nonvalidate = DOMProperty("nonvalidate")
+    rel = DOMProperty("rel")
+    target = DOMProperty("target")
 
 
-class h1(TextElementBase):
+class h1(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1"""
 
     tag = "h1"
 
 
-class h2(TextElementBase):
+class h2(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2"""
 
     tag = "h2"
 
 
-class h3(TextElementBase):
+class h3(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3"""
 
     tag = "h3"
 
 
-class h4(TextElementBase):
+class h4(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4"""
 
     tag = "h4"
 
 
-class h5(TextElementBase):
+class h5(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5"""
 
     tag = "h5"
 
 
-class h6(TextElementBase):
+class h6(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6"""
 
     tag = "h6"
 
 
-class header(TextElementBase):
+class head(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head"""
+
+    tag = "head"
+
+
+class header(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"""
 
     tag = "header"
 
 
-class hgroup(TextElementBase):
+class hgroup(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup"""
 
     tag = "hgroup"
 
 
-class hr(TextElementBase):
+class hr(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"""
 
     tag = "hr"
 
+    align = DOMProperty("align")
+    color = DOMProperty("color")
+    noshade = DOMProperty("noshade")
+    size = DOMProperty("size")
+    width = DOMProperty("width")
 
-class i(TextElementBase):
+
+class html(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html"""
+
+    tag = "html"
+
+
+class i(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i"""
 
     tag = "i"
 
 
-class iframe(TextElementBase):
+class iframe(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe"""
 
     tag = "iframe"
 
-    allow = JSProperty("allow")
-    allowfullscreen = JSProperty("allowfullscreen")
-    height = JSProperty("height")
-    loading = JSProperty("loading")
-    name = JSProperty("name")
-    referrerpolicy = JSProperty("referrerpolicy")
-    sandbox = JSProperty("sandbox")
-    src = JSProperty("src")
-    srcdoc = JSProperty("srcdoc")
-    width = JSProperty("width")
+    allow = DOMProperty("allow")
+    allowfullscreen = DOMProperty("allowfullscreen")
+    height = DOMProperty("height")
+    loading = DOMProperty("loading")
+    name = DOMProperty("name")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    sandbox = DOMProperty("sandbox")
+    src = DOMProperty("src")
+    srcdoc = DOMProperty("srcdoc")
+    width = DOMProperty("width")
 
 
-class img(ElementBase):
+class img(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"""
 
     tag = "img"
 
-    alt = JSProperty("alt")
-    crossorigin = JSProperty("crossorigin")
-    decoding = JSProperty("decoding")
-    fetchpriority = JSProperty("fetchpriority")
-    height = JSProperty("height")
-    ismap = JSProperty("ismap")
-    loading = JSProperty("loading")
-    referrerpolicy = JSProperty("referrerpolicy")
-    sizes = JSProperty("sizes")
-    src = JSProperty("src")
-    width = JSProperty("width")
+    alt = DOMProperty("alt")
+    crossorigin = DOMProperty("crossorigin")
+    decoding = DOMProperty("decoding")
+    fetchpriority = DOMProperty("fetchpriority")
+    height = DOMProperty("height")
+    ismap = DOMProperty("ismap")
+    loading = DOMProperty("loading")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    sizes = DOMProperty("sizes")
+    src = DOMProperty("src")
+    width = DOMProperty("width")
 
 
 # NOTE: Input is a reserved keyword in Python, so we use input_ instead
-class input_(ElementBase):
+class input_(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"""
 
     tag = "input"
 
-    accept = JSProperty("accept")
-    alt = JSProperty("alt")
-    autofocus = JSProperty("autofocus")
-    capture = JSProperty("capture")
-    checked = JSProperty("checked")
-    dirname = JSProperty("dirname")
-    disabled = JSProperty("disabled")
-    form = JSProperty("form")
-    formaction = JSProperty("formaction")
-    formenctype = JSProperty("formenctype")
-    formmethod = JSProperty("formmethod")
-    formnovalidate = JSProperty("formnovalidate")
-    formtarget = JSProperty("formtarget")
-    height = JSProperty("height")
-    list = JSProperty("list")
-    max = JSProperty("max")
-    maxlength = JSProperty("maxlength")
-    min = JSProperty("min")
-    minlength = JSProperty("minlength")
-    multiple = JSProperty("multiple")
-    name = JSProperty("name")
-    pattern = JSProperty("pattern")
-    placeholder = JSProperty("placeholder")
-    popovertarget = JSProperty("popovertarget")
-    popovertargetaction = JSProperty("popovertargetaction")
-    readonly = JSProperty("readonly")
-    required = JSProperty("required")
-    size = JSProperty("size")
-    src = JSProperty("src")
-    step = JSProperty("step")
-    type = JSProperty("type")
-    value = JSProperty("value")
-    width = JSProperty("width")
-
-
-class ins(TextElementBase):
+    accept = DOMProperty("accept")
+    alt = DOMProperty("alt")
+    autofocus = DOMProperty("autofocus")
+    capture = DOMProperty("capture")
+    checked = DOMProperty("checked")
+    dirname = DOMProperty("dirname")
+    disabled = DOMProperty("disabled")
+    form = DOMProperty("form")
+    formaction = DOMProperty("formaction")
+    formenctype = DOMProperty("formenctype")
+    formmethod = DOMProperty("formmethod")
+    formnovalidate = DOMProperty("formnovalidate")
+    formtarget = DOMProperty("formtarget")
+    height = DOMProperty("height")
+    list = DOMProperty("list")
+    max = DOMProperty("max")
+    maxlength = DOMProperty("maxlength")
+    min = DOMProperty("min")
+    minlength = DOMProperty("minlength")
+    multiple = DOMProperty("multiple")
+    name = DOMProperty("name")
+    pattern = DOMProperty("pattern")
+    placeholder = DOMProperty("placeholder")
+    popovertarget = DOMProperty("popovertarget")
+    popovertargetaction = DOMProperty("popovertargetaction")
+    readonly = DOMProperty("readonly")
+    required = DOMProperty("required")
+    size = DOMProperty("size")
+    src = DOMProperty("src")
+    step = DOMProperty("step")
+    type = DOMProperty("type")
+    value = DOMProperty("value")
+    width = DOMProperty("width")
+
+
+class ins(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins"""
 
     tag = "ins"
 
-    cite = JSProperty("cite")
-    datetime = JSProperty("datetime")
+    cite = DOMProperty("cite")
+    datetime = DOMProperty("datetime")
 
 
-class kbd(TextElementBase):
+class kbd(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd"""
 
     tag = "kbd"
 
 
-class label(TextElementBase):
+class label(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"""
 
     tag = "label"
 
-    for_ = JSProperty("for")
+    for_ = DOMProperty("for")
 
 
-class legend(TextElementBase):
+class legend(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend"""
 
     tag = "legend"
 
 
-class li(TextElementBase):
+class li(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"""
 
     tag = "li"
 
-    value = JSProperty("value")
+    value = DOMProperty("value")
 
 
-class link(TextElementBase):
+class link(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"""
 
     tag = "link"
 
-    as_ = JSProperty("as")
-    crossorigin = JSProperty("crossorigin")
-    disabled = JSProperty("disabled")
-    fetchpriority = JSProperty("fetchpriority")
-    href = JSProperty("href")
-    imagesizes = JSProperty("imagesizes")
-    imagesrcset = JSProperty("imagesrcset")
-    integrity = JSProperty("integrity")
-    media = JSProperty("media")
-    rel = JSProperty("rel")
-    referrerpolicy = JSProperty("referrerpolicy")
-    sizes = JSProperty("sizes")
-    title = JSProperty("title")
-    type = JSProperty("type")
-
-
-class main(TextElementBase):
+    as_ = DOMProperty("as")
+    crossorigin = DOMProperty("crossorigin")
+    disabled = DOMProperty("disabled")
+    fetchpriority = DOMProperty("fetchpriority")
+    href = DOMProperty("href")
+    imagesizes = DOMProperty("imagesizes")
+    imagesrcset = DOMProperty("imagesrcset")
+    integrity = DOMProperty("integrity")
+    media = DOMProperty("media")
+    rel = DOMProperty("rel")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    sizes = DOMProperty("sizes")
+    title = DOMProperty("title")
+    type = DOMProperty("type")
+
+
+class main(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"""
 
     tag = "main"
 
 
-class map_(TextElementBase):
+class map_(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map"""
 
     tag = "map"
 
-    name = JSProperty("name")
+    name = DOMProperty("name")
 
 
-class mark(TextElementBase):
+class mark(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark"""
 
     tag = "mark"
 
 
-class menu(TextElementBase):
+class menu(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"""
 
     tag = "menu"
 
 
-class meter(TextElementBase):
+class meta(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"""
+
+    tag = "meta"
+
+    charset = DOMProperty("charset")
+    content = DOMProperty("content")
+    http_equiv = DOMProperty("http-equiv")
+    name = DOMProperty("name")
+
+
+class meter(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter"""
 
     tag = "meter"
 
-    form = JSProperty("form")
-    high = JSProperty("high")
-    low = JSProperty("low")
-    max = JSProperty("max")
-    min = JSProperty("min")
-    optimum = JSProperty("optimum")
-    value = JSProperty("value")
+    form = DOMProperty("form")
+    high = DOMProperty("high")
+    low = DOMProperty("low")
+    max = DOMProperty("max")
+    min = DOMProperty("min")
+    optimum = DOMProperty("optimum")
+    value = DOMProperty("value")
 
 
-class nav(TextElementBase):
+class nav(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"""
 
     tag = "nav"
 
 
-class object_(TextElementBase):
+class object_(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object"""
 
     tag = "object"
 
-    data = JSProperty("data")
-    form = JSProperty("form")
-    height = JSProperty("height")
-    name = JSProperty("name")
-    type = JSProperty("type")
-    usemap = JSProperty("usemap")
-    width = JSProperty("width")
+    data = DOMProperty("data")
+    form = DOMProperty("form")
+    height = DOMProperty("height")
+    name = DOMProperty("name")
+    type = DOMProperty("type")
+    usemap = DOMProperty("usemap")
+    width = DOMProperty("width")
 
 
-class ol(TextElementBase):
+class ol(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol"""
 
     tag = "ol"
 
-    reversed = JSProperty("reversed")
-    start = JSProperty("start")
-    type = JSProperty("type")
+    reversed = DOMProperty("reversed")
+    start = DOMProperty("start")
+    type = DOMProperty("type")
 
 
-class optgroup(TextElementBase):
+class optgroup(ContainerElement, HasOptions):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup"""
 
     tag = "optgroup"
 
-    disabled = JSProperty("disabled")
-    label = JSProperty("label")
+    disabled = DOMProperty("disabled")
+    label = DOMProperty("label")
 
 
-class option(TextElementBase):
+class option(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"""
 
     tag = "option"
 
-    disabled = JSProperty("value")
-    label = JSProperty("label")
-    selected = JSProperty("selected")
-    value = JSProperty("value")
+    disabled = DOMProperty("value")
+    label = DOMProperty("label")
+    selected = DOMProperty("selected")
+    value = DOMProperty("value")
 
 
-class output(TextElementBase):
+class output(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output"""
 
     tag = "output"
 
-    for_ = JSProperty("for")
-    form = JSProperty("form")
-    name = JSProperty("name")
+    for_ = DOMProperty("for")
+    form = DOMProperty("form")
+    name = DOMProperty("name")
 
 
-class p(TextElementBase):
+class p(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"""
 
     tag = "p"
 
 
-class picture(TextElementBase):
+class param(ContainerElement):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"""
+
+    tag = "p"
+
+
+class picture(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture"""
 
     tag = "picture"
 
 
-class pre(TextElementBase):
+class pre(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"""
 
     tag = "pre"
 
 
-class progress(TextElementBase):
+class progress(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"""
 
     tag = "progress"
 
-    max = JSProperty("max")
-    value = JSProperty("value")
+    max = DOMProperty("max")
+    value = DOMProperty("value")
 
 
-class q(TextElementBase):
+class q(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"""
 
     tag = "q"
 
-    cite = JSProperty("cite")
+    cite = DOMProperty("cite")
 
 
-class s(TextElementBase):
+class s(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s"""
 
     tag = "s"
 
 
-class script(TextElementBase):
+class script(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"""
 
     tag = "script"
 
     # Let's add async manually since it's a reserved keyword in Python
-    async_ = JSProperty("async")
-    blocking = JSProperty("blocking")
-    crossorigin = JSProperty("crossorigin")
-    defer = JSProperty("defer")
-    fetchpriority = JSProperty("fetchpriority")
-    integrity = JSProperty("integrity")
-    nomodule = JSProperty("nomodule")
-    nonce = JSProperty("nonce")
-    referrerpolicy = JSProperty("referrerpolicy")
-    src = JSProperty("src")
-    type = JSProperty("type")
-
-
-class section(TextElementBase):
+    async_ = DOMProperty("async")
+    blocking = DOMProperty("blocking")
+    crossorigin = DOMProperty("crossorigin")
+    defer = DOMProperty("defer")
+    fetchpriority = DOMProperty("fetchpriority")
+    integrity = DOMProperty("integrity")
+    nomodule = DOMProperty("nomodule")
+    nonce = DOMProperty("nonce")
+    referrerpolicy = DOMProperty("referrerpolicy")
+    src = DOMProperty("src")
+    type = DOMProperty("type")
+
+
+class section(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"""
 
     tag = "section"
 
 
-class select(TextElementBase):
+class select(ContainerElement, HasOptions):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select"""
 
     tag = "select"
 
+    value = DOMProperty("value")
 
-class small(TextElementBase):
+
+class small(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small"""
 
     tag = "small"
 
 
-class source(TextElementBase):
+class source(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source"""
 
     tag = "source"
 
-    media = JSProperty("media")
-    sizes = JSProperty("sizes")
-    src = JSProperty("src")
-    srcset = JSProperty("srcset")
-    type = JSProperty("type")
+    media = DOMProperty("media")
+    sizes = DOMProperty("sizes")
+    src = DOMProperty("src")
+    srcset = DOMProperty("srcset")
+    type = DOMProperty("type")
 
 
-class span(TextElementBase):
+class span(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"""
 
     tag = "span"
 
 
-class strong(TextElementBase):
+class strong(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong"""
 
     tag = "strong"
 
 
-class style(TextElementBase):
+class style(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style"""
 
     tag = "style"
 
-    blocking = JSProperty("blocking")
-    media = JSProperty("media")
-    nonce = JSProperty("nonce")
-    title = JSProperty("title")
+    blocking = DOMProperty("blocking")
+    media = DOMProperty("media")
+    nonce = DOMProperty("nonce")
+    title = DOMProperty("title")
 
 
-class sub(TextElementBase):
+class sub(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub"""
 
     tag = "sub"
 
 
-class summary(TextElementBase):
+class summary(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"""
 
     tag = "summary"
 
 
-class sup(TextElementBase):
+class sup(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup"""
 
     tag = "sup"
 
 
-class table(TextElementBase):
+class table(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"""
 
     tag = "table"
 
 
-class tbody(TextElementBase):
+class tbody(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody"""
 
     tag = "tbody"
 
 
-class td(TextElementBase):
+class td(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"""
 
     tag = "td"
 
-    colspan = JSProperty("colspan")
-    headers = JSProperty("headers")
-    rowspan = JSProperty("rowspan")
+    colspan = DOMProperty("colspan")
+    headers = DOMProperty("headers")
+    rowspan = DOMProperty("rowspan")
 
 
-class template(TextElementBase):
+class template(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"""
 
     tag = "template"
 
-    shadowrootmode = JSProperty("shadowrootmode")
+    shadowrootmode = DOMProperty("shadowrootmode")
 
 
-class textarea(TextElementBase):
+class textarea(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"""
 
     tag = "textarea"
 
-    autocapitalize = JSProperty("autocapitalize")
-    autocomplete = JSProperty("autocomplete")
-    autofocus = JSProperty("autofocus")
-    cols = JSProperty("cols")
-    dirname = JSProperty("dirname")
-    disabled = JSProperty("disabled")
-    form = JSProperty("form")
-    maxlength = JSProperty("maxlength")
-    minlength = JSProperty("minlength")
-    name = JSProperty("name")
-    placeholder = JSProperty("placeholder")
-    readonly = JSProperty("readonly")
-    required = JSProperty("required")
-    rows = JSProperty("rows")
-    spellcheck = JSProperty("spellcheck")
-    wrap = JSProperty("wrap")
-
-
-class tfoot(TextElementBase):
+    autocapitalize = DOMProperty("autocapitalize")
+    autocomplete = DOMProperty("autocomplete")
+    autofocus = DOMProperty("autofocus")
+    cols = DOMProperty("cols")
+    dirname = DOMProperty("dirname")
+    disabled = DOMProperty("disabled")
+    form = DOMProperty("form")
+    maxlength = DOMProperty("maxlength")
+    minlength = DOMProperty("minlength")
+    name = DOMProperty("name")
+    placeholder = DOMProperty("placeholder")
+    readonly = DOMProperty("readonly")
+    required = DOMProperty("required")
+    rows = DOMProperty("rows")
+    spellcheck = DOMProperty("spellcheck")
+    value = DOMProperty("value")
+    wrap = DOMProperty("wrap")
+
+
+class tfoot(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot"""
 
     tag = "tfoot"
 
 
-class th(TextElementBase):
+class th(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"""
 
     tag = "th"
 
 
-class thead(TextElementBase):
+class thead(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead"""
 
     tag = "thead"
 
 
-class time(TextElementBase):
+class time(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time"""
 
     tag = "time"
 
-    datetime = JSProperty("datetime")
+    datetime = DOMProperty("datetime")
 
 
-class title(TextElementBase):
+class title(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title"""
 
     tag = "title"
 
 
-class tr(TextElementBase):
+class tr(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr"""
 
     tag = "tr"
 
-    abbr = JSProperty("abbr")
-    colspan = JSProperty("colspan")
-    headers = JSProperty("headers")
-    rowspan = JSProperty("rowspan")
-    scope = JSProperty("scope")
+    abbr = DOMProperty("abbr")
+    colspan = DOMProperty("colspan")
+    headers = DOMProperty("headers")
+    rowspan = DOMProperty("rowspan")
+    scope = DOMProperty("scope")
 
 
-class track(TextElementBase):
+class track(Element):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track"""
 
     tag = "track"
 
-    default = JSProperty("default")
-    kind = JSProperty("kind")
-    label = JSProperty("label")
-    src = JSProperty("src")
-    srclang = JSProperty("srclang")
+    default = DOMProperty("default")
+    kind = DOMProperty("kind")
+    label = DOMProperty("label")
+    src = DOMProperty("src")
+    srclang = DOMProperty("srclang")
 
 
-class u(TextElementBase):
+class u(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u"""
 
     tag = "u"
 
 
-class ul(TextElementBase):
+class ul(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"""
 
     tag = "ul"
 
 
-class var(TextElementBase):
+class var(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var"""
 
     tag = "var"
 
 
-class video(TextElementBase):
+class video(ContainerElement):
     """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"""
 
     tag = "video"
 
-    autoplay = JSProperty("autoplay")
-    controls = JSProperty("controls")
-    crossorigin = JSProperty("crossorigin")
-    disablepictureinpicture = JSProperty("disablepictureinpicture")
-    disableremoteplayback = JSProperty("disableremoteplayback")
-    height = JSProperty("height")
-    loop = JSProperty("loop")
-    muted = JSProperty("muted")
-    playsinline = JSProperty("playsinline")
-    poster = JSProperty("poster")
-    preload = JSProperty("preload")
-    src = JSProperty("src")
-    width = JSProperty("width")
+    autoplay = DOMProperty("autoplay")
+    controls = DOMProperty("controls")
+    crossorigin = DOMProperty("crossorigin")
+    disablepictureinpicture = DOMProperty("disablepictureinpicture")
+    disableremoteplayback = DOMProperty("disableremoteplayback")
+    height = DOMProperty("height")
+    loop = DOMProperty("loop")
+    muted = DOMProperty("muted")
+    playsinline = DOMProperty("playsinline")
+    poster = DOMProperty("poster")
+    preload = DOMProperty("preload")
+    src = DOMProperty("src")
+    width = DOMProperty("width")
+    videoHeight = DOMProperty("videoHeight")
+    videoWidth = DOMProperty("videoWidth")
+
+    def snap(
+        self,
+        to: Element | str = None,
+        width: int | None = None,
+        height: int | None = None,
+    ):
+        """
+        Capture a snapshot (i.e. a single frame) of a video to a canvas.
+
+        Inputs:
+
+            * to: the canvas to save the video frame to (if None, one is created).
+            * width: width of the snapshot (defaults to the video width).
+            * height: height of the snapshot (defaults to the video height).
+
+        Output:
+            (Element) canvas element where the video frame snapshot was drawn into
+        """
+        width = width if width is not None else self.videoWidth
+        height = height if height is not None else self.videoHeight
+
+        if to is None:
+            to = canvas(width=width, height=height)
+
+        elif isinstance(to, Element):
+            if to.tag != "canvas":
+                raise TypeError("Element to snap to must be a canvas.")
+
+        elif getattr(to, "tagName", "") == "CANVAS":
+            to = canvas(dom_element=to)
+
+        # If 'to' is a string, then assume it is a query selector.
+        elif isinstance(to, str):
+            nodelist = document.querySelectorAll(to)  # NOQA
+            if nodelist.length == 0:
+                raise TypeError("No element with selector {to} to snap to.")
+
+            if nodelist[0].tagName != "CANVAS":
+                raise TypeError("Element to snap to must be a canvas.")
+
+            to = canvas(dom_element=nodelist[0])
+
+        to.draw(self, width, height)
+
+        return to
+
+
+class wbr(Element):
+    """Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr"""
+
+    tag = "wbr"
 
 
 # Custom Elements
-class grid(TextElementBase):
+class grid(ContainerElement):
     tag = "div"
 
     def __init__(self, layout, content=None, gap=None, **kwargs):
@@ -1396,10 +1478,68 @@ class grid(TextElementBase):
         self.style["grid-template-columns"] = layout
 
         # TODO: This should be a property
-        if not gap is None:
+        if gap is not None:
             self.style["gap"] = gap
 
 
+class ClassesCollection:
+    def __init__(self, collection: "ElementCollection") -> None:
+        self._collection = collection
+
+    def __contains__(self, class_name):
+        for element in self._collection:
+            if class_name in element.classes:
+                return True
+
+        return False
+
+    def __eq__(self, other):
+        return (
+            isinstance(other, ClassesCollection)
+            and self._collection == other._collection
+        )
+
+    def __iter__(self):
+        for class_name in self._all_class_names():
+            yield class_name
+
+    def __len__(self):
+        return len(self._all_class_names())
+
+    def __repr__(self):
+        return f"ClassesCollection({repr(self._collection)})"
+
+    def __str__(self):
+        return " ".join(self._all_class_names())
+
+    def add(self, *class_names):
+        for element in self._collection:
+            element.classes.add(*class_names)
+
+    def contains(self, class_name):
+        return class_name in self
+
+    def remove(self, *class_names):
+        for element in self._collection:
+            element.classes.remove(*class_names)
+
+    def replace(self, old_class, new_class):
+        for element in self._collection:
+            element.classes.replace(old_class, new_class)
+
+    def toggle(self, *class_names):
+        for element in self._collection:
+            element.classes.toggle(*class_names)
+
+    def _all_class_names(self):
+        all_class_names = set()
+        for element in self._collection:
+            for class_name in element.classes:
+                all_class_names.add(class_name)
+
+        return all_class_names
+
+
 class StyleCollection:
     def __init__(self, collection: "ElementCollection") -> None:
         self._collection = collection
@@ -1414,6 +1554,9 @@ class StyleCollection:
         for element in self._collection._elements:
             element.style[key] = value
 
+    def __repr__(self):
+        return f"StyleCollection({repr(self._collection)})"
+
     def remove(self, key):
         for element in self._collection._elements:
             element.style.remove(key)
@@ -1422,29 +1565,70 @@ class StyleCollection:
 class ElementCollection:
     def __init__(self, elements: [Element]) -> None:
         self._elements = elements
-        self.style = StyleCollection(self)
+        self._classes = ClassesCollection(self)
+        self._style = StyleCollection(self)
+
+    def __eq__(self, obj):
+        """Check for equality by comparing the underlying DOM elements."""
+        return isinstance(obj, ElementCollection) and obj._elements == self._elements
 
     def __getitem__(self, key):
         # If it's an integer we use it to access the elements in the collection
         if isinstance(key, int):
             return self._elements[key]
+
         # If it's a slice we use it to support slice operations over the elements
         # in the collection
         elif isinstance(key, slice):
             return ElementCollection(self._elements[key])
 
-        # If it's anything else (basically a string) we use it as a selector
-        # TODO: Write tests!
-        elements = self._element.querySelectorAll(key)
-        return ElementCollection([Element(el) for el in elements])
+        # If it's anything else (basically a string) we use it as a query selector.
+        return self.find(key)
+
+    def __iter__(self):
+        yield from self._elements
 
     def __len__(self):
         return len(self._elements)
 
-    def __eq__(self, obj):
-        """Check if the element is the same as the other element by comparing
-        the underlying JS element"""
-        return isinstance(obj, ElementCollection) and obj._elements == self._elements
+    def __repr__(self):
+        return (
+            f"{self.__class__.__name__} (length: {len(self._elements)}) "
+            f"{self._elements}"
+        )
+
+    def __getattr__(self, item):
+        return self._get_attribute(item)
+
+    def __setattr__(self, key, value):
+        # This class overrides `__setattr__` to delegate "public" attributes to the
+        # elements in the collection, but we don't use the usual Python pattern where we
+        # set attributes on the collection itself via `self.__dict__` as it is not yet
+        # supported in our build of MicroPython. Instead, we handle it here.
+        if key.startswith("_"):
+            super().__setattr__(key, value)
+
+        else:
+            self._set_attribute(key, value)
+
+    @property
+    def children(self):
+        return self._elements
+
+    @property
+    def classes(self):
+        return self._classes
+
+    @property
+    def style(self):
+        return self._style
+
+    def find(self, selector):
+        elements = []
+        for element in self._elements:
+            elements.extend(element.find(selector))
+
+        return ElementCollection(elements)
 
     def _get_attribute(self, attr, index=None):
         if index is None:
@@ -1457,28 +1641,39 @@ class ElementCollection:
         for el in self._elements:
             setattr(el, attr, value)
 
-    @property
-    def html(self):
-        return self._get_attribute("html")
-
-    @html.setter
-    def html(self, value):
-        self._set_attribute("html", value)
-
-    @property
-    def value(self):
-        return self._get_attribute("value")
-
-    @value.setter
-    def value(self, value):
-        self._set_attribute("value", value)
 
-    @property
-    def children(self):
-        return self._elements
-
-    def __iter__(self):
-        yield from self._elements
-
-    def __repr__(self):
-        return f"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}"
+# fmt: off
+ELEMENT_CLASSES = [
+    # We put grid first because it is really just a <div> but we want the div class to
+    # be used if wrapping existing js elements that we have not tagged with a
+    # `data-pyscript-type` attribute (last one is the winner when it comes to this
+    # list).
+    grid,
+    # The rest in alphabetical order.
+    a, abbr, address, area, article, aside, audio,
+    b, base, blockquote, body, br, button,
+    canvas, caption, cite, code, col, colgroup,
+    data, datalist, dd, del_, details, dialog, div, dl, dt,
+    em, embed,
+    fieldset, figcaption, figure, footer, form,
+    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,
+    i, iframe, img, input_, ins,
+    kbd,
+    label, legend, li, link,
+    main, map_, mark, menu, meta, meter,
+    nav,
+    object_, ol, optgroup, option, output,
+    p, param, picture, pre, progress,
+    q,
+    s, script, section, select, small, source, span, strong, style, sub, summary, sup,
+    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,
+    u, ul,
+    var, video,
+    wbr,
+]
+# fmt: on
+
+
+# Lookup tables to get an element class by its name or tag.
+ELEMENT_CLASSES_BY_NAME = {cls.__name__: cls for cls in ELEMENT_CLASSES}
+ELEMENT_CLASSES_BY_TAG = {cls.tag: cls for cls in ELEMENT_CLASSES}