npm - @pyscript/core - Versions diffs - 0.4.56 → 0.5.0-rc1 - Mend

@pyscript/core 0.4.56 → 0.5.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/src/stdlib/pyscript.js CHANGED Viewed

@@ -7,12 +7,12 @@ export default {
     "fetch.py": "import json\n\nimport js\nfrom pyscript.util import as_bytearray\n\n\n### wrap the response to grant Pythonic results\nclass _Response:\n    def __init__(self, response):\n        self._response = response\n\n    # grant access to response.ok and other fields\n    def __getattr__(self, attr):\n        return getattr(self._response, attr)\n\n    # exposed methods with Pythonic results\n    async def arrayBuffer(self):\n        buffer = await self._response.arrayBuffer()\n        # works in Pyodide\n        if hasattr(buffer, \"to_py\"):\n            return buffer.to_py()\n        # shims in MicroPython\n        return memoryview(as_bytearray(buffer))\n\n    async def blob(self):\n        return await self._response.blob()\n\n    async def bytearray(self):\n        buffer = await self._response.arrayBuffer()\n        return as_bytearray(buffer)\n\n    async def json(self):\n        return json.loads(await self.text())\n\n    async def text(self):\n        return await self._response.text()\n\n\n### allow direct await to _Response methods\nclass _DirectResponse:\n    @staticmethod\n    def setup(promise, response):\n        promise._response = _Response(response)\n        return promise._response\n\n    def __init__(self, promise):\n        self._promise = promise\n        promise._response = None\n        promise.arrayBuffer = self.arrayBuffer\n        promise.blob = self.blob\n        promise.bytearray = self.bytearray\n        promise.json = self.json\n        promise.text = self.text\n\n    async def _response(self):\n        if not self._promise._response:\n            await self._promise\n        return self._promise._response\n\n    async def arrayBuffer(self):\n        response = await self._response()\n        return await response.arrayBuffer()\n\n    async def blob(self):\n        response = await self._response()\n        return await response.blob()\n\n    async def bytearray(self):\n        response = await self._response()\n        return await response.bytearray()\n\n    async def json(self):\n        response = await self._response()\n        return await response.json()\n\n    async def text(self):\n        response = await self._response()\n        return await response.text()\n\n\ndef fetch(url, **kw):\n    # workaround Pyodide / MicroPython dict <-> js conversion\n    options = js.JSON.parse(json.dumps(kw))\n    awaited = lambda response, *args: _DirectResponse.setup(promise, response)\n    promise = js.fetch(url, options).then(awaited)\n    _DirectResponse(promise)\n    return promise\n",
     "ffi.py": "try:\n    import js\n    from pyodide.ffi import create_proxy as _cp\n    from pyodide.ffi import to_js as _py_tjs\n\n    from_entries = js.Object.fromEntries\n\n    def _tjs(value, **kw):\n        if not hasattr(kw, \"dict_converter\"):\n            kw[\"dict_converter\"] = from_entries\n        return _py_tjs(value, **kw)\n\nexcept:\n    from jsffi import create_proxy as _cp\n    from jsffi import to_js as _tjs\n\ncreate_proxy = _cp\nto_js = _tjs\n",
     "flatted.py": "# https://www.npmjs.com/package/flatted\n\nimport json as _json\n\n\nclass _Known:\n    def __init__(self):\n        self.key = []\n        self.value = []\n\n\nclass _String:\n    def __init__(self, value):\n        self.value = value\n\n\ndef _array_keys(value):\n    keys = []\n    i = 0\n    for _ in value:\n        keys.append(i)\n        i += 1\n    return keys\n\n\ndef _object_keys(value):\n    keys = []\n    for key in value:\n        keys.append(key)\n    return keys\n\n\ndef _is_array(value):\n    return isinstance(value, list) or isinstance(value, tuple)\n\n\ndef _is_object(value):\n    return isinstance(value, dict)\n\n\ndef _is_string(value):\n    return isinstance(value, str)\n\n\ndef _index(known, input, value):\n    input.append(value)\n    index = str(len(input) - 1)\n    known.key.append(value)\n    known.value.append(index)\n    return index\n\n\ndef _loop(keys, input, known, output):\n    for key in keys:\n        value = output[key]\n        if isinstance(value, _String):\n            _ref(key, input[int(value.value)], input, known, output)\n\n    return output\n\n\ndef _ref(key, value, input, known, output):\n    if _is_array(value) and not value in known:\n        known.append(value)\n        value = _loop(_array_keys(value), input, known, value)\n    elif _is_object(value) and not value in known:\n        known.append(value)\n        value = _loop(_object_keys(value), input, known, value)\n\n    output[key] = value\n\n\ndef _relate(known, input, value):\n    if _is_string(value) or _is_array(value) or _is_object(value):\n        try:\n            return known.value[known.key.index(value)]\n        except:\n            return _index(known, input, value)\n\n    return value\n\n\ndef _transform(known, input, value):\n    if _is_array(value):\n        output = []\n        for val in value:\n            output.append(_relate(known, input, val))\n        return output\n\n    if _is_object(value):\n        obj = {}\n        for key in value:\n            obj[key] = _relate(known, input, value[key])\n        return obj\n\n    return value\n\n\ndef _wrap(value):\n    if _is_string(value):\n        return _String(value)\n\n    if _is_array(value):\n        i = 0\n        for val in value:\n            value[i] = _wrap(val)\n            i += 1\n\n    elif _is_object(value):\n        for key in value:\n            value[key] = _wrap(value[key])\n\n    return value\n\n\ndef parse(value, *args, **kwargs):\n    json = _json.loads(value, *args, **kwargs)\n    wrapped = []\n    for value in json:\n        wrapped.append(_wrap(value))\n\n    input = []\n    for value in wrapped:\n        if isinstance(value, _String):\n            input.append(value.value)\n        else:\n            input.append(value)\n\n    value = input[0]\n\n    if _is_array(value):\n        return _loop(_array_keys(value), input, [value], value)\n\n    if _is_object(value):\n        return _loop(_object_keys(value), input, [value], value)\n\n    return value\n\n\ndef stringify(value, *args, **kwargs):\n    known = _Known()\n    input = []\n    output = []\n    i = int(_index(known, input, value))\n    while i < len(input):\n        output.append(_transform(known, input, input[i]))\n        i += 1\n    return _json.dumps(output, *args, **kwargs)\n",
-    "magic_js.py": "import json\nimport sys\n\nimport js as globalThis\nfrom polyscript import config as _config\nfrom polyscript import js_modules\nfrom pyscript.util import NotSupported\n\nRUNNING_IN_WORKER = not hasattr(globalThis, \"document\")\n\nconfig = json.loads(globalThis.JSON.stringify(_config))\n\n\n# allow `from pyscript.js_modules.xxx import yyy`\nclass JSModule:\n    def __init__(self, name):\n        self.name = name\n\n    def __getattr__(self, field):\n        # avoid pyodide looking for non existent fields\n        if not field.startswith(\"_\"):\n            return getattr(getattr(js_modules, self.name), field)\n\n\n# generate N modules in the system that will proxy the real value\nfor name in globalThis.Reflect.ownKeys(js_modules):\n    sys.modules[f\"pyscript.js_modules.{name}\"] = JSModule(name)\nsys.modules[\"pyscript.js_modules\"] = js_modules\n\nif RUNNING_IN_WORKER:\n    import polyscript\n\n    PyWorker = NotSupported(\n        \"pyscript.PyWorker\",\n        \"pyscript.PyWorker works only when running in the main thread\",\n    )\n\n    try:\n        globalThis.SharedArrayBuffer.new(4)\n        import js\n\n        window = polyscript.xworker.window\n        document = window.document\n        js.document = document\n        # this is the same as js_import on main and it lands modules on main\n        js_import = window.Function(\n            \"return (...urls) => Promise.all(urls.map((url) => import(url)))\"\n        )()\n    except:\n        globalThis.console.debug(\"SharedArrayBuffer is not available\")\n        # in this scenario none of the utilities would work\n        # as expected so we better export these as NotSupported\n        window = NotSupported(\n            \"pyscript.window\",\n            \"pyscript.window in workers works only via SharedArrayBuffer\",\n        )\n        document = NotSupported(\n            \"pyscript.document\",\n            \"pyscript.document in workers works only via SharedArrayBuffer\",\n        )\n\n    sync = polyscript.xworker.sync\n\n    # in workers the display does not have a default ID\n    # but there is a sync utility from xworker\n    def current_target():\n        return polyscript.target\n\nelse:\n    import _pyscript\n    from _pyscript import PyWorker, js_import\n\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        \"pyscript.sync\", \"pyscript.sync works only when running in a worker\"\n    )\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
+    "magic_js.py": "import json\nimport sys\n\nimport js as globalThis\nfrom polyscript import config as _config\nfrom polyscript import js_modules\nfrom pyscript.util import NotSupported\n\nRUNNING_IN_WORKER = not hasattr(globalThis, \"document\")\n\nconfig = json.loads(globalThis.JSON.stringify(_config))\n\n\n# allow `from pyscript.js_modules.xxx import yyy`\nclass JSModule:\n    def __init__(self, name):\n        self.name = name\n\n    def __getattr__(self, field):\n        # avoid pyodide looking for non existent fields\n        if not field.startswith(\"_\"):\n            return getattr(getattr(js_modules, self.name), field)\n\n\n# generate N modules in the system that will proxy the real value\nfor name in globalThis.Reflect.ownKeys(js_modules):\n    sys.modules[f\"pyscript.js_modules.{name}\"] = JSModule(name)\nsys.modules[\"pyscript.js_modules\"] = js_modules\n\nif RUNNING_IN_WORKER:\n    import polyscript\n\n    PyWorker = NotSupported(\n        \"pyscript.PyWorker\",\n        \"pyscript.PyWorker works only when running in the main thread\",\n    )\n\n    try:\n        import js\n\n        window = polyscript.xworker.window\n        document = window.document\n        js.document = document\n        # this is the same as js_import on main and it lands modules on main\n        js_import = window.Function(\n            \"return (...urls) => Promise.all(urls.map((url) => import(url)))\"\n        )()\n    except:\n        message = \"Unable to use `window` or `document` -> https://docs.pyscript.net/latest/faq/#sharedarraybuffer\"\n        globalThis.console.warn(message)\n        window = NotSupported(\"pyscript.window\", message)\n        document = NotSupported(\"pyscript.document\", message)\n\n    sync = polyscript.xworker.sync\n\n    # in workers the display does not have a default ID\n    # but there is a sync utility from xworker\n    def current_target():\n        return polyscript.target\n\nelse:\n    import _pyscript\n    from _pyscript import PyWorker, js_import\n\n    window = globalThis\n    document = globalThis.document\n    sync = NotSupported(\n        \"pyscript.sync\", \"pyscript.sync works only when running in a worker\"\n    )\n\n    # in MAIN the current element target exist, just use it\n    def current_target():\n        return _pyscript.target\n",
     "storage.py": "from polyscript import storage as _storage\nfrom pyscript.flatted import parse as _parse\nfrom pyscript.flatted import stringify as _stringify\n\n\n# convert a Python value into an IndexedDB compatible entry\ndef _to_idb(value):\n    if value is None:\n        return _stringify([\"null\", 0])\n    if isinstance(value, (bool, float, int, str, list, dict, tuple)):\n        return _stringify([\"generic\", value])\n    if isinstance(value, bytearray):\n        return _stringify([\"bytearray\", [v for v in value]])\n    if isinstance(value, memoryview):\n        return _stringify([\"memoryview\", [v for v in value]])\n    raise TypeError(f\"Unexpected value: {value}\")\n\n\n# convert an IndexedDB compatible entry into a Python value\ndef _from_idb(value):\n    (\n        kind,\n        result,\n    ) = _parse(value)\n    if kind == \"null\":\n        return None\n    if kind == \"generic\":\n        return result\n    if kind == \"bytearray\":\n        return bytearray(result)\n    if kind == \"memoryview\":\n        return memoryview(bytearray(result))\n    return value\n\n\nclass Storage(dict):\n    def __init__(self, store):\n        super().__init__({k: _from_idb(v) for k, v in store.entries()})\n        self.__store__ = store\n\n    def __delitem__(self, attr):\n        self.__store__.delete(attr)\n        super().__delitem__(attr)\n\n    def __setitem__(self, attr, value):\n        self.__store__.set(attr, _to_idb(value))\n        super().__setitem__(attr, value)\n\n    def clear(self):\n        self.__store__.clear()\n        super().clear()\n\n    async def sync(self):\n        await self.__store__.sync()\n\n\nasync def storage(name=\"\", storage_class=Storage):\n    if not name:\n        raise ValueError(\"The storage name must be defined\")\n    return storage_class(await _storage(f\"@pyscript/{name}\"))\n",
     "util.py": "import js\n\n\ndef as_bytearray(buffer):\n    ui8a = js.Uint8Array.new(buffer)\n    size = ui8a.length\n    ba = bytearray(size)\n    for i in range(0, size):\n        ba[i] = ui8a[i]\n    return ba\n\n\nclass NotSupported:\n    \"\"\"\n    Small helper that raises exceptions if you try to get/set any attribute on\n    it.\n    \"\"\"\n\n    def __init__(self, name, error):\n        object.__setattr__(self, \"name\", name)\n        object.__setattr__(self, \"error\", error)\n\n    def __repr__(self):\n        return f\"<NotSupported {self.name} [{self.error}]>\"\n\n    def __getattr__(self, attr):\n        raise AttributeError(self.error)\n\n    def __setattr__(self, attr, value):\n        raise AttributeError(self.error)\n\n    def __call__(self, *args):\n        raise TypeError(self.error)\n",
     "web": {
-      "__init__.py": "from pyscript import document\nfrom pyscript.web.elements import ElementCollection, element_from_dom\n\n\nclass DOM:\n    def __init__(self):\n        self.body = element_from_dom(document.body)\n        self.head = element_from_dom(document.head)\n\n    def __getitem__(self, selector):\n        return self.find(selector)\n\n    def find(self, selector):\n        return ElementCollection(\n            [element_from_dom(el) for el in document.querySelectorAll(selector)]\n        )\n\n\ndom = DOM()\n",
-      "elements.py": "import inspect\nimport sys\n\ntry:\n    from typing import Any\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\nfrom pyscript import document\n\n#: A flag to show if MicroPython is the current Python interpreter.\nis_micropython = \"MicroPython\" in sys.version\n\n\ndef getmembers_static(cls):\n    \"\"\"Cross-interpreter implementation of inspect.getmembers_static.\"\"\"\n\n    if is_micropython:  # pragma: no cover\n        return [(name, getattr(cls, name)) for name, _ in inspect.getmembers(cls)]\n\n    return inspect.getmembers_static(cls)\n\n\nclass DOMProperty:\n    \"\"\"A descriptor representing a DOM property on an Element`.\n\n    This maps a property on an `Element` instance, to the property with the specified\n    name on the element's underlying DOM element.\n    \"\"\"\n\n    def __init__(self, name: str, allow_nones: bool = False):\n        self.name = name\n        self.allow_nones = allow_nones\n\n    def __get__(self, obj, objtype=None):\n        return getattr(obj._dom_element, self.name)\n\n    def __set__(self, obj, value):\n        if not self.allow_nones and value is None:\n            return\n        setattr(obj._dom_element, self.name, value)\n\n\ndef element_from_dom(dom_element):\n    \"\"\"Create an instance of the appropriate subclass of `Element` for a DOM element.\n\n    If the DOM element was created via an `Element` (i.e. by us) it will have a data\n    attribute named `data-pyscript-type` that contains the name of the subclass\n    that created it. If the `data-pyscript-type` attribute *is* present we look up the\n    subclass by name and create an instance of that. Otherwise, we make a 'best-guess'\n    and look up the `Element` subclass by the DOM element's tag name (this is NOT\n    fool-proof as many subclasses might use a `<div>`, but close enough for jazz).\n    \"\"\"\n\n    # We use \"getAttribute\" here instead of `js_element.dataset.pyscriptType` as the\n    # latter throws an `AttributeError` if the value isn't set. This way we just get\n    # `None` which seems cleaner.\n    cls_name = dom_element.getAttribute(\"data-pyscript-type\")\n    if cls_name:\n        cls = ELEMENT_CLASSES_BY_NAME.get(cls_name.lower())\n\n    else:\n        cls = ELEMENT_CLASSES_BY_TAG.get(dom_element.tagName.lower())\n\n    # For any unknown elements (custom tags etc.) create an instance of the 'Element'\n    # class.\n    if not cls:\n        cls = Element\n\n    return cls(dom_element=dom_element)\n\n\nclass Element:\n    tag = \"div\"\n\n    # GLOBAL ATTRIBUTES.\n    # These are attribute that all elements have (this list is a subset of the official\n    # one). We are trying to capture the most used ones.\n    accesskey = DOMProperty(\"accesskey\")\n    autofocus = DOMProperty(\"autofocus\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    className = DOMProperty(\"className\")\n    contenteditable = DOMProperty(\"contenteditable\")\n    draggable = DOMProperty(\"draggable\")\n    enterkeyhint = DOMProperty(\"enterkeyhint\")\n    hidden = DOMProperty(\"hidden\")\n    innerHTML = DOMProperty(\"innerHTML\")\n    id = DOMProperty(\"id\")\n    lang = DOMProperty(\"lang\")\n    nonce = DOMProperty(\"nonce\")\n    part = DOMProperty(\"part\")\n    popover = DOMProperty(\"popover\")\n    slot = DOMProperty(\"slot\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    tabindex = DOMProperty(\"tabindex\")\n    text = DOMProperty(\"textContent\")\n    title = DOMProperty(\"title\")\n    translate = DOMProperty(\"translate\")\n    virtualkeyboardpolicy = DOMProperty(\"virtualkeyboardpolicy\")\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(self.tag)\n\n        # Tag the DOM element with our class name.\n        #\n        # Using the `dataset` attribute is how you programmatically add `data-xxx`\n        # attributes to a DOM element. In this case it will set an attribute that\n        # appears in (say) the devtools as `data-pyscript-type`.\n        self._dom_element.dataset.pyscriptType = type(self).__name__\n\n        self._parent = None\n        self._classes = Classes(self)\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        # Set any specified styles.\n        if isinstance(style, dict):\n            self.style.set(**style)\n\n        elif style is not None:\n            raise ValueError(\n                f\"Style should be a dictionary, received {style} (type {type(style)}) instead.\"\n            )\n\n        self._set_dom_properties(**kwargs)\n\n    def _set_dom_properties(self, **kwargs):\n        \"\"\"Set all the properties (of type DOMProperty) provided in input as properties\n        of the class instance.\n\n        Args:\n            **kwargs: The properties to set\n        \"\"\"\n        dom_properties = {\n            attribute_name: attribute_value\n            for attribute_name, attribute_value in getmembers_static(self.__class__)\n            if isinstance(attribute_value, DOMProperty)\n        }\n\n        for name, value in kwargs.items():\n            if name not in dom_properties:\n                raise ValueError(f\"'{name}' is not a DOM property.\")\n\n            try:\n                setattr(self, name, value)\n            except Exception as e:\n                print(f\"Error setting {name} to {value}: {e}\")\n                raise\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    @property\n    def children(self):\n        return ElementCollection(\n            [element_from_dom(el) for el in self._dom_element.children]\n        )\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._dom_element.parentElement:\n            self._parent = element_from_dom(self._dom_element.parentElement)\n\n        return self._parent\n\n    @property\n    def style(self):\n        return self._style\n\n    def append(self, child):\n        if isinstance(child, Element):\n            self._dom_element.appendChild(child._dom_element)\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self._dom_element.appendChild(el._dom_element)\n\n        else:\n            # In this case we know it's not an Element or an ElementCollection, so we\n            # guess that it's either a DOM element or NodeList returned via the ffi.\n            try:\n                # First, we try to see if it's an element by accessing the 'tagName'\n                # attribute.\n                child.tagName\n                self._dom_element.appendChild(child)\n\n            except AttributeError:\n                try:\n                    # Ok, it's not an element, so let's see if it's a NodeList by\n                    # accessing the 'length' attribute.\n                    child.length\n                    for element_ in child:\n                        self._dom_element.appendChild(element_)\n\n                except AttributeError:\n                    # Nope! This is not an element or a NodeList.\n                    raise TypeError(\n                        f'Element \"{child}\" is a proxy object, but not a valid element or a NodeList.'\n                    )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = element_from_dom(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        return ElementCollection(\n            [\n                element_from_dom(el)\n                for el in self._dom_element.querySelectorAll(selector)\n            ]\n        )\n\n    def show_me(self):\n        \"\"\"Scroll the element into view.\"\"\"\n        self._dom_element.scrollIntoView()\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, class_name):\n        if class_name in self:\n            self.remove(class_name)\n            return False\n\n        self.add(class_name)\n        return True\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>\n    element.\n\n    It allows to access to add and remove <option>s by using the `add` and `remove`\n    methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n        # create the option element and set the attributes\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._dom_element\n\n        self._element._dom_element.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._dom_element.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [element_from_dom(opt) for opt in self._element._dom_element.options]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._dom_element.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass Style:\n    \"\"\"A dict-like interface to an element's css style.\"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        self._style = self._element._dom_element.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kwargs):\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n\n# IMPORTANT: For all HTML components defined below, we are not mapping all possible\n# attributes, just the global and the most common ones. If you need to access a\n# specific attribute, you can always use the `_dom_element.<attribute>`\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n    tag = \"a\"\n\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n    type = DOMProperty(\"type\")\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n    tag = \"abbr\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n    tag = \"address\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n    tag = \"area\"\n\n    alt = DOMProperty(\"alt\")\n    coords = DOMProperty(\"coords\")\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    ping = DOMProperty(\"ping\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    shape = DOMProperty(\"shape\")\n    target = DOMProperty(\"target\")\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n    tag = \"article\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n    tag = \"aside\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n    tag = \"audio\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    controlslist = DOMProperty(\"controlslist\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n    tag = \"b\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n    tag = \"base\"\n\n    href = DOMProperty(\"href\")\n    target = DOMProperty(\"target\")\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n    tag = \"blockquote\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n    tag = \"body\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n    tag = \"br\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n    tag = \"button\"\n\n    autofocus = DOMProperty(\"autofocus\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    tag = \"canvas\"\n\n    height = DOMProperty(\"height\")\n    width = DOMProperty(\"width\")\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        link = self.create(\"a\")\n        link._dom_element.download = filename\n        link._dom_element.href = self._dom_element.toDataURL()\n        link._dom_element.click()\n\n    def draw(self, what, width, height):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        self._dom_element.getContext(\"2d\").drawImage(what, 0, 0, width, height)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n    tag = \"caption\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n    tag = \"cite\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n    tag = \"code\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n    tag = \"col\"\n\n    span = DOMProperty(\"span\")\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n    tag = \"colgroup\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n    tag = \"data\"\n\n    value = DOMProperty(\"value\")\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n    tag = \"datalist\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n    tag = \"dd\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n    tag = \"del\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n    tag = \"details\"\n\n    open = DOMProperty(\"open\")\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n    tag = \"dialog\"\n\n    open = DOMProperty(\"open\")\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n    tag = \"div\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n    tag = \"dl\"\n\n    value = DOMProperty(\"value\")\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n    tag = \"dt\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n    tag = \"em\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n    tag = \"embed\"\n\n    height = DOMProperty(\"height\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n    width = DOMProperty(\"width\")\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n    tag = \"fieldset\"\n\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n    tag = \"figcaption\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n    tag = \"figure\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n    tag = \"footer\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n    tag = \"form\"\n\n    accept_charset = DOMProperty(\"accept-charset\")\n    action = DOMProperty(\"action\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    enctype = DOMProperty(\"enctype\")\n    name = DOMProperty(\"name\")\n    method = DOMProperty(\"method\")\n    nonvalidate = DOMProperty(\"nonvalidate\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n    tag = \"h1\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n    tag = \"h2\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n    tag = \"h3\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n    tag = \"h4\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n    tag = \"h5\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n    tag = \"h6\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n    tag = \"head\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n    tag = \"header\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n    tag = \"hgroup\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n    tag = \"hr\"\n\n    align = DOMProperty(\"align\")\n    color = DOMProperty(\"color\")\n    noshade = DOMProperty(\"noshade\")\n    size = DOMProperty(\"size\")\n    width = DOMProperty(\"width\")\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n    tag = \"html\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n    tag = \"i\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n    tag = \"iframe\"\n\n    allow = DOMProperty(\"allow\")\n    allowfullscreen = DOMProperty(\"allowfullscreen\")\n    height = DOMProperty(\"height\")\n    loading = DOMProperty(\"loading\")\n    name = DOMProperty(\"name\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sandbox = DOMProperty(\"sandbox\")\n    src = DOMProperty(\"src\")\n    srcdoc = DOMProperty(\"srcdoc\")\n    width = DOMProperty(\"width\")\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n    tag = \"img\"\n\n    alt = DOMProperty(\"alt\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    decoding = DOMProperty(\"decoding\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    height = DOMProperty(\"height\")\n    ismap = DOMProperty(\"ismap\")\n    loading = DOMProperty(\"loading\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n\n\n# NOTE: Input is a reserved keyword in Python, so we use input_ instead\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n    tag = \"input\"\n\n    accept = DOMProperty(\"accept\")\n    alt = DOMProperty(\"alt\")\n    autofocus = DOMProperty(\"autofocus\")\n    capture = DOMProperty(\"capture\")\n    checked = DOMProperty(\"checked\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    height = DOMProperty(\"height\")\n    list = DOMProperty(\"list\")\n    max = DOMProperty(\"max\")\n    maxlength = DOMProperty(\"maxlength\")\n    min = DOMProperty(\"min\")\n    minlength = DOMProperty(\"minlength\")\n    multiple = DOMProperty(\"multiple\")\n    name = DOMProperty(\"name\")\n    pattern = DOMProperty(\"pattern\")\n    placeholder = DOMProperty(\"placeholder\")\n    popovertarget = DOMProperty(\"popovertarget\")\n    popovertargetaction = DOMProperty(\"popovertargetaction\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    size = DOMProperty(\"size\")\n    src = DOMProperty(\"src\")\n    step = DOMProperty(\"step\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n    width = DOMProperty(\"width\")\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n    tag = \"ins\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n    tag = \"kbd\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n    tag = \"label\"\n\n    for_ = DOMProperty(\"for\")\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n    tag = \"legend\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n    tag = \"li\"\n\n    value = DOMProperty(\"value\")\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n    tag = \"link\"\n\n    as_ = DOMProperty(\"as\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disabled = DOMProperty(\"disabled\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    href = DOMProperty(\"href\")\n    imagesizes = DOMProperty(\"imagesizes\")\n    imagesrcset = DOMProperty(\"imagesrcset\")\n    integrity = DOMProperty(\"integrity\")\n    media = DOMProperty(\"media\")\n    rel = DOMProperty(\"rel\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    title = DOMProperty(\"title\")\n    type = DOMProperty(\"type\")\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n    tag = \"main\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n    tag = \"map\"\n\n    name = DOMProperty(\"name\")\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n    tag = \"mark\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n    tag = \"menu\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n    tag = \"meta\"\n\n    charset = DOMProperty(\"charset\")\n    content = DOMProperty(\"content\")\n    http_equiv = DOMProperty(\"http-equiv\")\n    name = DOMProperty(\"name\")\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n    tag = \"meter\"\n\n    form = DOMProperty(\"form\")\n    high = DOMProperty(\"high\")\n    low = DOMProperty(\"low\")\n    max = DOMProperty(\"max\")\n    min = DOMProperty(\"min\")\n    optimum = DOMProperty(\"optimum\")\n    value = DOMProperty(\"value\")\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n    tag = \"nav\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n    tag = \"object\"\n\n    data = DOMProperty(\"data\")\n    form = DOMProperty(\"form\")\n    height = DOMProperty(\"height\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    usemap = DOMProperty(\"usemap\")\n    width = DOMProperty(\"width\")\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n    tag = \"ol\"\n\n    reversed = DOMProperty(\"reversed\")\n    start = DOMProperty(\"start\")\n    type = DOMProperty(\"type\")\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n    tag = \"optgroup\"\n\n    disabled = DOMProperty(\"disabled\")\n    label = DOMProperty(\"label\")\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n    tag = \"option\"\n\n    disabled = DOMProperty(\"value\")\n    label = DOMProperty(\"label\")\n    selected = DOMProperty(\"selected\")\n    value = DOMProperty(\"value\")\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n    tag = \"output\"\n\n    for_ = DOMProperty(\"for\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n    tag = \"picture\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n    tag = \"pre\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n    tag = \"progress\"\n\n    max = DOMProperty(\"max\")\n    value = DOMProperty(\"value\")\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n    tag = \"q\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n    tag = \"s\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n    tag = \"script\"\n\n    # Let's add async manually since it's a reserved keyword in Python\n    async_ = DOMProperty(\"async\")\n    blocking = DOMProperty(\"blocking\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    defer = DOMProperty(\"defer\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    integrity = DOMProperty(\"integrity\")\n    nomodule = DOMProperty(\"nomodule\")\n    nonce = DOMProperty(\"nonce\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n    tag = \"section\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n    tag = \"select\"\n\n    value = DOMProperty(\"value\")\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n    tag = \"small\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n    tag = \"source\"\n\n    media = DOMProperty(\"media\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    srcset = DOMProperty(\"srcset\")\n    type = DOMProperty(\"type\")\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n    tag = \"span\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n    tag = \"strong\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n    tag = \"style\"\n\n    blocking = DOMProperty(\"blocking\")\n    media = DOMProperty(\"media\")\n    nonce = DOMProperty(\"nonce\")\n    title = DOMProperty(\"title\")\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n    tag = \"sub\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n    tag = \"summary\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n    tag = \"sup\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n    tag = \"table\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n    tag = \"tbody\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n    tag = \"td\"\n\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n    tag = \"template\"\n\n    shadowrootmode = DOMProperty(\"shadowrootmode\")\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n    tag = \"textarea\"\n\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    autofocus = DOMProperty(\"autofocus\")\n    cols = DOMProperty(\"cols\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    maxlength = DOMProperty(\"maxlength\")\n    minlength = DOMProperty(\"minlength\")\n    name = DOMProperty(\"name\")\n    placeholder = DOMProperty(\"placeholder\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    rows = DOMProperty(\"rows\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    value = DOMProperty(\"value\")\n    wrap = DOMProperty(\"wrap\")\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n    tag = \"tfoot\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n    tag = \"th\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n    tag = \"thead\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n    tag = \"time\"\n\n    datetime = DOMProperty(\"datetime\")\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n    tag = \"title\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n    tag = \"tr\"\n\n    abbr = DOMProperty(\"abbr\")\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n    scope = DOMProperty(\"scope\")\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n    tag = \"track\"\n\n    default = DOMProperty(\"default\")\n    kind = DOMProperty(\"kind\")\n    label = DOMProperty(\"label\")\n    src = DOMProperty(\"src\")\n    srclang = DOMProperty(\"srclang\")\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n    tag = \"u\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n    tag = \"ul\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n    tag = \"var\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    tag = \"video\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disablepictureinpicture = DOMProperty(\"disablepictureinpicture\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    height = DOMProperty(\"height\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    playsinline = DOMProperty(\"playsinline\")\n    poster = DOMProperty(\"poster\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Captures a snapshot of a video.\n\n        Inputs:\n\n            * to: element where to save the snapshot of the video frame to\n            * width: width of the image\n            * height: height of the image\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        if to is None:\n            to_canvas = self.create(\"canvas\")\n            if width is None:\n                width = self._dom_element.width\n            if height is None:\n                height = self._dom_element.height\n            to_canvas._dom_element.width = width\n            to_canvas._dom_element.height = height\n\n        elif isinstance(to, Element):\n            if to._dom_element.tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a canvas.\")\n            to_canvas = to\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to_canvas = canvas(to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must a be canvas.\")\n\n            to_canvas = canvas(nodelist[0])\n\n        to_canvas.draw(self, width, height)\n\n        return canvas\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n    tag = \"wbr\"\n\n\n# Custom Elements\nclass grid(ContainerElement):\n    tag = \"div\"\n\n    def __init__(self, layout, content=None, gap=None, **kwargs):\n        super().__init__(content, **kwargs)\n        self.style[\"display\"] = \"grid\"\n        self.style[\"grid-template-columns\"] = layout\n\n        # TODO: This should be a property\n        if not gap is None:\n            self.style[\"gap\"] = gap\n\n\nclass ClassesCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, class_name):\n        for element in self._collection:\n            element.classes.toggle(class_name)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    @property\n    def children(self):\n        return self._elements\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def style(self):\n        return self._style\n\n    @property\n    def innerHTML(self):\n        return self._get_attribute(\"innerHTML\")\n\n    @innerHTML.setter\n    def innerHTML(self, value):\n        self._set_attribute(\"innerHTML\", value)\n\n    @property\n    def value(self):\n        return self._get_attribute(\"value\")\n\n    @value.setter\n    def value(self, value):\n        self._set_attribute(\"value\", value)\n\n    def __eq__(self, obj):\n        \"\"\"Check if the element is the same as the other element by comparing\n        the underlying DOM element\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a query selector.\n        elements = self._elements.querySelectorAll(key)\n        return ElementCollection([element_from_dom(el) for el in elements])\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}\"\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n\n# fmt: off\nELEMENT_CLASSES = [\n    # We put grid first because it is really just a <div> but we want the div class to\n    # be used if wrapping existing js elements that we have not tagged with a\n    # `data-pyscript-type` attribute (last one is the winner when it comes to this\n    # list).\n    grid,\n    # The rest in alphabetical order.\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Lookup tables to get an element class by its name or tag.\nELEMENT_CLASSES_BY_NAME = {cls.__name__: cls for cls in ELEMENT_CLASSES}\nELEMENT_CLASSES_BY_TAG = {cls.tag: cls for cls in ELEMENT_CLASSES}\n"
+      "__init__.py": "from pyscript import document\nfrom pyscript.web.elements import Element, ElementCollection\n\n\nclass DOM:\n    def __init__(self):\n        self.body = Element.from_dom_element(document.body)\n        self.head = Element.from_dom_element(document.head)\n\n    def __getitem__(self, selector):\n        return self.find(selector)\n\n    def find(self, selector):\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in document.querySelectorAll(selector)\n            ]\n        )\n\n\ndom = DOM()\n",
+      "elements.py": "# noinspection PyPep8Naming\nimport inspect\nimport sys\n\ntry:\n    from typing import Any\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\nfrom pyscript import document\n\n#: A flag to show if MicroPython is the current Python interpreter.\nis_micropython = \"MicroPython\" in sys.version\n\n\ndef getmembers_static(cls):\n    \"\"\"Cross-interpreter implementation of inspect.getmembers_static.\"\"\"\n\n    if is_micropython:  # pragma: no cover\n        return [(name, getattr(cls, name)) for name, _ in inspect.getmembers(cls)]\n\n    return inspect.getmembers_static(cls)\n\n\nclass DOMProperty:\n    \"\"\"A descriptor representing a DOM property on an `Element` instance.\n\n    This maps a property on an `Element` instance, to the property with the specified\n    name on the element's underlying DOM element.\n    \"\"\"\n\n    def __init__(self, name: str, allow_nones: bool = False):\n        self.name = name\n        self.allow_nones = allow_nones\n\n    def __get__(self, obj, objtype=None):\n        return getattr(obj._dom_element, self.name)\n\n    def __set__(self, obj, value):\n        if not self.allow_nones and value is None:\n            return\n        setattr(obj._dom_element, self.name, value)\n\n\nclass Element:\n    tag = \"div\"\n\n    # These are attribute that all elements have (this list is a subset of the official\n    # one - we are just trying to capture the most used ones).\n    accesskey = DOMProperty(\"accesskey\")\n    autofocus = DOMProperty(\"autofocus\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    className = DOMProperty(\"className\")\n    contenteditable = DOMProperty(\"contenteditable\")\n    draggable = DOMProperty(\"draggable\")\n    enterkeyhint = DOMProperty(\"enterkeyhint\")\n    hidden = DOMProperty(\"hidden\")\n    innerHTML = DOMProperty(\"innerHTML\")\n    id = DOMProperty(\"id\")\n    lang = DOMProperty(\"lang\")\n    nonce = DOMProperty(\"nonce\")\n    part = DOMProperty(\"part\")\n    popover = DOMProperty(\"popover\")\n    slot = DOMProperty(\"slot\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    tabindex = DOMProperty(\"tabindex\")\n    tagName = DOMProperty(\"tagName\")\n    textContent = DOMProperty(\"textContent\")\n    title = DOMProperty(\"title\")\n    translate = DOMProperty(\"translate\")\n    virtualkeyboardpolicy = DOMProperty(\"virtualkeyboardpolicy\")\n\n    @classmethod\n    def from_dom_element(cls, dom_element):\n        \"\"\"Create an instance of the appropriate subclass of `Element` for a DOM\n        element.\n\n        If the DOM element was created via an `Element` (i.e. by us) it will have a data\n        attribute named `data-pyscript-type` that contains the name of the subclass\n        that created it. Hence, if the `data-pyscript-type` attribute *is* present we\n        look up the subclass by name and create an instance of that. Otherwise, we make\n        a 'best-guess' and look up the `Element` subclass by the DOM element's tag name\n        (this is NOT fool-proof as many subclasses might use a `<div>`, but close enough\n        for jazz).\n        \"\"\"\n\n        # We use \"getAttribute\" here instead of `js_element.dataset.pyscriptType` as the\n        # latter throws an `AttributeError` if the value isn't set. This way we just get\n        # `None` which seems cleaner.\n        cls_name = dom_element.getAttribute(\"data-pyscript-type\")\n        if cls_name:\n            element_cls = ELEMENT_CLASSES_BY_NAME.get(cls_name.lower())\n\n        else:\n            element_cls = ELEMENT_CLASSES_BY_TAG.get(dom_element.tagName.lower())\n\n        # For any unknown elements (custom tags etc.) create an instance of this\n        # class ('Element').\n        if not element_cls:\n            element_cls = cls\n\n        return element_cls(dom_element=dom_element)\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(self.tag)\n\n        # Tag the DOM element with our class name.\n        #\n        # Using the `dataset` attribute is how you programmatically add `data-xxx`\n        # attributes to a DOM element. In this case it will set an attribute that\n        # appears in the DOM as `data-pyscript-type`.\n        self._dom_element.dataset.pyscriptType = type(self).__name__\n\n        self._parent = None\n        self._classes = Classes(self)\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        if isinstance(style, dict):\n            self.style.set(**style)\n\n        elif style is not None:\n            raise ValueError(\n                f\"Style should be a dictionary, received {style} \"\n                f\"(type {type(style)}) instead.\"\n            )\n\n        self._set_dom_properties(**kwargs)\n\n    def _set_dom_properties(self, **kwargs):\n        \"\"\"Set the specified DOM properties.\n\n        Args:\n            **kwargs: The properties to set\n        \"\"\"\n        # Harvest all DOM properties from the instance's class.\n        dom_properties = {\n            attribute_name: attribute_value\n            for attribute_name, attribute_value in getmembers_static(self.__class__)\n            if isinstance(attribute_value, DOMProperty)\n        }\n\n        for name, value in kwargs.items():\n            if name not in dom_properties:\n                raise ValueError(f\"'{name}' is not a DOM property.\")\n\n            try:\n                setattr(self, name, value)\n            except Exception as e:\n                print(f\"Error setting {name} to {value}: {e}\")\n                raise\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    @property\n    def children(self):\n        return ElementCollection(\n            [Element.from_dom_element(el) for el in self._dom_element.children]\n        )\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._dom_element.parentElement:\n            self._parent = Element.from_dom_element(self._dom_element.parentElement)\n\n        return self._parent\n\n    @property\n    def style(self):\n        return self._style\n\n    def append(self, child):\n        if isinstance(child, Element):\n            self._dom_element.appendChild(child._dom_element)\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self._dom_element.appendChild(el._dom_element)\n\n        else:\n            # In this case we know it's not an Element or an ElementCollection, so we\n            # guess that it's either a DOM element or NodeList returned via the ffi.\n            try:\n                # First, we try to see if it's an element by accessing the 'tagName'\n                # attribute.\n                child.tagName\n                self._dom_element.appendChild(child)\n\n            except AttributeError:\n                try:\n                    # Ok, it's not an element, so let's see if it's a NodeList by\n                    # accessing the 'length' attribute.\n                    child.length\n                    for element_ in child:\n                        self._dom_element.appendChild(element_)\n\n                except AttributeError:\n                    # Nope! This is not an element or a NodeList.\n                    raise TypeError(\n                        f'Element \"{child}\" is a proxy object, \"'\n                        f\"but not a valid element or a NodeList.\"\n                    )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = Element.from_dom_element(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in self._dom_element.querySelectorAll(selector)\n            ]\n        )\n\n    def show_me(self):\n        \"\"\"Scroll the element into view.\"\"\"\n        self._dom_element.scrollIntoView()\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, *class_names):\n        for class_name in class_names:\n            if class_name in self:\n                self.remove(class_name)\n\n            else:\n                self.add(class_name)\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>\n    element.\n\n    It allows to access to add and remove <option>s by using the `add` and `remove`\n    methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._dom_element\n\n        self._element._dom_element.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._dom_element.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [\n            Element.from_dom_element(opt) for opt in self._element._dom_element.options\n        ]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._dom_element.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass Style:\n    \"\"\"A dict-like interface to an element's css style.\"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        self._style = self._element._dom_element.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kwargs):\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    \"\"\"Base class for elements that can contain other elements.\"\"\"\n\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n\n# IMPORTANT: For all HTML components defined below, we are not mapping all possible\n# attributes, just the global and the most common ones. If you need to access a\n# specific attribute, you can always use the `_dom_element.<attribute>`\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n    tag = \"a\"\n\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n    type = DOMProperty(\"type\")\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n    tag = \"abbr\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n    tag = \"address\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n    tag = \"area\"\n\n    alt = DOMProperty(\"alt\")\n    coords = DOMProperty(\"coords\")\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    ping = DOMProperty(\"ping\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    shape = DOMProperty(\"shape\")\n    target = DOMProperty(\"target\")\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n    tag = \"article\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n    tag = \"aside\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n    tag = \"audio\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    controlslist = DOMProperty(\"controlslist\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n    tag = \"b\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n    tag = \"base\"\n\n    href = DOMProperty(\"href\")\n    target = DOMProperty(\"target\")\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n    tag = \"blockquote\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n    tag = \"body\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n    tag = \"br\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n    tag = \"button\"\n\n    autofocus = DOMProperty(\"autofocus\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    tag = \"canvas\"\n\n    height = DOMProperty(\"height\")\n    width = DOMProperty(\"width\")\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        download_link = a(download=filename, href=self._dom_element.toDataURL())\n\n        # Adding the link to the DOM is recommended for browser compatibility to make\n        # sure that the click works.\n        self.append(download_link)\n\n        download_link._dom_element.click()\n\n    def draw(self, what, width=None, height=None):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        ctx = self._dom_element.getContext(\"2d\")\n        if width or height:\n            ctx.drawImage(what, 0, 0, width, height)\n\n        else:\n            ctx.drawImage(what, 0, 0)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n    tag = \"caption\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n    tag = \"cite\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n    tag = \"code\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n    tag = \"col\"\n\n    span = DOMProperty(\"span\")\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n    tag = \"colgroup\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n    tag = \"data\"\n\n    value = DOMProperty(\"value\")\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n    tag = \"datalist\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n    tag = \"dd\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n    tag = \"del\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n    tag = \"details\"\n\n    open = DOMProperty(\"open\")\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n    tag = \"dialog\"\n\n    open = DOMProperty(\"open\")\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n    tag = \"div\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n    tag = \"dl\"\n\n    value = DOMProperty(\"value\")\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n    tag = \"dt\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n    tag = \"em\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n    tag = \"embed\"\n\n    height = DOMProperty(\"height\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n    width = DOMProperty(\"width\")\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n    tag = \"fieldset\"\n\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n    tag = \"figcaption\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n    tag = \"figure\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n    tag = \"footer\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n    tag = \"form\"\n\n    accept_charset = DOMProperty(\"accept-charset\")\n    action = DOMProperty(\"action\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    enctype = DOMProperty(\"enctype\")\n    name = DOMProperty(\"name\")\n    method = DOMProperty(\"method\")\n    nonvalidate = DOMProperty(\"nonvalidate\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n    tag = \"h1\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n    tag = \"h2\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n    tag = \"h3\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n    tag = \"h4\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n    tag = \"h5\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n    tag = \"h6\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n    tag = \"head\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n    tag = \"header\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n    tag = \"hgroup\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n    tag = \"hr\"\n\n    align = DOMProperty(\"align\")\n    color = DOMProperty(\"color\")\n    noshade = DOMProperty(\"noshade\")\n    size = DOMProperty(\"size\")\n    width = DOMProperty(\"width\")\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n    tag = \"html\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n    tag = \"i\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n    tag = \"iframe\"\n\n    allow = DOMProperty(\"allow\")\n    allowfullscreen = DOMProperty(\"allowfullscreen\")\n    height = DOMProperty(\"height\")\n    loading = DOMProperty(\"loading\")\n    name = DOMProperty(\"name\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sandbox = DOMProperty(\"sandbox\")\n    src = DOMProperty(\"src\")\n    srcdoc = DOMProperty(\"srcdoc\")\n    width = DOMProperty(\"width\")\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n    tag = \"img\"\n\n    alt = DOMProperty(\"alt\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    decoding = DOMProperty(\"decoding\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    height = DOMProperty(\"height\")\n    ismap = DOMProperty(\"ismap\")\n    loading = DOMProperty(\"loading\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n\n\n# NOTE: Input is a reserved keyword in Python, so we use input_ instead\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n    tag = \"input\"\n\n    accept = DOMProperty(\"accept\")\n    alt = DOMProperty(\"alt\")\n    autofocus = DOMProperty(\"autofocus\")\n    capture = DOMProperty(\"capture\")\n    checked = DOMProperty(\"checked\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    height = DOMProperty(\"height\")\n    list = DOMProperty(\"list\")\n    max = DOMProperty(\"max\")\n    maxlength = DOMProperty(\"maxlength\")\n    min = DOMProperty(\"min\")\n    minlength = DOMProperty(\"minlength\")\n    multiple = DOMProperty(\"multiple\")\n    name = DOMProperty(\"name\")\n    pattern = DOMProperty(\"pattern\")\n    placeholder = DOMProperty(\"placeholder\")\n    popovertarget = DOMProperty(\"popovertarget\")\n    popovertargetaction = DOMProperty(\"popovertargetaction\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    size = DOMProperty(\"size\")\n    src = DOMProperty(\"src\")\n    step = DOMProperty(\"step\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n    width = DOMProperty(\"width\")\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n    tag = \"ins\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n    tag = \"kbd\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n    tag = \"label\"\n\n    for_ = DOMProperty(\"for\")\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n    tag = \"legend\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n    tag = \"li\"\n\n    value = DOMProperty(\"value\")\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n    tag = \"link\"\n\n    as_ = DOMProperty(\"as\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disabled = DOMProperty(\"disabled\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    href = DOMProperty(\"href\")\n    imagesizes = DOMProperty(\"imagesizes\")\n    imagesrcset = DOMProperty(\"imagesrcset\")\n    integrity = DOMProperty(\"integrity\")\n    media = DOMProperty(\"media\")\n    rel = DOMProperty(\"rel\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    title = DOMProperty(\"title\")\n    type = DOMProperty(\"type\")\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n    tag = \"main\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n    tag = \"map\"\n\n    name = DOMProperty(\"name\")\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n    tag = \"mark\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n    tag = \"menu\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n    tag = \"meta\"\n\n    charset = DOMProperty(\"charset\")\n    content = DOMProperty(\"content\")\n    http_equiv = DOMProperty(\"http-equiv\")\n    name = DOMProperty(\"name\")\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n    tag = \"meter\"\n\n    form = DOMProperty(\"form\")\n    high = DOMProperty(\"high\")\n    low = DOMProperty(\"low\")\n    max = DOMProperty(\"max\")\n    min = DOMProperty(\"min\")\n    optimum = DOMProperty(\"optimum\")\n    value = DOMProperty(\"value\")\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n    tag = \"nav\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n    tag = \"object\"\n\n    data = DOMProperty(\"data\")\n    form = DOMProperty(\"form\")\n    height = DOMProperty(\"height\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    usemap = DOMProperty(\"usemap\")\n    width = DOMProperty(\"width\")\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n    tag = \"ol\"\n\n    reversed = DOMProperty(\"reversed\")\n    start = DOMProperty(\"start\")\n    type = DOMProperty(\"type\")\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n    tag = \"optgroup\"\n\n    disabled = DOMProperty(\"disabled\")\n    label = DOMProperty(\"label\")\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n    tag = \"option\"\n\n    disabled = DOMProperty(\"value\")\n    label = DOMProperty(\"label\")\n    selected = DOMProperty(\"selected\")\n    value = DOMProperty(\"value\")\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n    tag = \"output\"\n\n    for_ = DOMProperty(\"for\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n    tag = \"picture\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n    tag = \"pre\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n    tag = \"progress\"\n\n    max = DOMProperty(\"max\")\n    value = DOMProperty(\"value\")\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n    tag = \"q\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n    tag = \"s\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n    tag = \"script\"\n\n    # Let's add async manually since it's a reserved keyword in Python\n    async_ = DOMProperty(\"async\")\n    blocking = DOMProperty(\"blocking\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    defer = DOMProperty(\"defer\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    integrity = DOMProperty(\"integrity\")\n    nomodule = DOMProperty(\"nomodule\")\n    nonce = DOMProperty(\"nonce\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n    tag = \"section\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n    tag = \"select\"\n\n    value = DOMProperty(\"value\")\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n    tag = \"small\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n    tag = \"source\"\n\n    media = DOMProperty(\"media\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    srcset = DOMProperty(\"srcset\")\n    type = DOMProperty(\"type\")\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n    tag = \"span\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n    tag = \"strong\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n    tag = \"style\"\n\n    blocking = DOMProperty(\"blocking\")\n    media = DOMProperty(\"media\")\n    nonce = DOMProperty(\"nonce\")\n    title = DOMProperty(\"title\")\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n    tag = \"sub\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n    tag = \"summary\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n    tag = \"sup\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n    tag = \"table\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n    tag = \"tbody\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n    tag = \"td\"\n\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n    tag = \"template\"\n\n    shadowrootmode = DOMProperty(\"shadowrootmode\")\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n    tag = \"textarea\"\n\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    autofocus = DOMProperty(\"autofocus\")\n    cols = DOMProperty(\"cols\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    maxlength = DOMProperty(\"maxlength\")\n    minlength = DOMProperty(\"minlength\")\n    name = DOMProperty(\"name\")\n    placeholder = DOMProperty(\"placeholder\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    rows = DOMProperty(\"rows\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    value = DOMProperty(\"value\")\n    wrap = DOMProperty(\"wrap\")\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n    tag = \"tfoot\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n    tag = \"th\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n    tag = \"thead\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n    tag = \"time\"\n\n    datetime = DOMProperty(\"datetime\")\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n    tag = \"title\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n    tag = \"tr\"\n\n    abbr = DOMProperty(\"abbr\")\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n    scope = DOMProperty(\"scope\")\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n    tag = \"track\"\n\n    default = DOMProperty(\"default\")\n    kind = DOMProperty(\"kind\")\n    label = DOMProperty(\"label\")\n    src = DOMProperty(\"src\")\n    srclang = DOMProperty(\"srclang\")\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n    tag = \"u\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n    tag = \"ul\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n    tag = \"var\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    tag = \"video\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disablepictureinpicture = DOMProperty(\"disablepictureinpicture\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    height = DOMProperty(\"height\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    playsinline = DOMProperty(\"playsinline\")\n    poster = DOMProperty(\"poster\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n    videoHeight = DOMProperty(\"videoHeight\")\n    videoWidth = DOMProperty(\"videoWidth\")\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Capture a snapshot (i.e. a single frame) of a video to a canvas.\n\n        Inputs:\n\n            * to: the canvas to save the video frame to (if None, one is created).\n            * width: width of the snapshot (defaults to the video width).\n            * height: height of the snapshot (defaults to the video height).\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        width = width if width is not None else self.videoWidth\n        height = height if height is not None else self.videoHeight\n\n        if to is None:\n            to = canvas(width=width, height=height)\n\n        elif isinstance(to, Element):\n            if to.tag != \"canvas\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to = canvas(dom_element=to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)  # NOQA\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n            to = canvas(dom_element=nodelist[0])\n\n        to.draw(self, width, height)\n\n        return to\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n    tag = \"wbr\"\n\n\n# Custom Elements\nclass grid(ContainerElement):\n    tag = \"div\"\n\n    def __init__(self, layout, content=None, gap=None, **kwargs):\n        super().__init__(content, **kwargs)\n        self.style[\"display\"] = \"grid\"\n        self.style[\"grid-template-columns\"] = layout\n\n        # TODO: This should be a property\n        if gap is not None:\n            self.style[\"gap\"] = gap\n\n\nclass ClassesCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, *class_names):\n        for element in self._collection:\n            element.classes.toggle(*class_names)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM elements.\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a query selector.\n        return self.find(key)\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return (\n            f\"{self.__class__.__name__} (length: {len(self._elements)}) \"\n            f\"{self._elements}\"\n        )\n\n    def __getattr__(self, item):\n        return self._get_attribute(item)\n\n    def __setattr__(self, key, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # elements in the collection, but we don't use the usual Python pattern where we\n        # set attributes on the collection itself via `self.__dict__` as it is not yet\n        # supported in our build of MicroPython. Instead, we handle it here.\n        if key.startswith(\"_\"):\n            super().__setattr__(key, value)\n\n        else:\n            self._set_attribute(key, value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def style(self):\n        return self._style\n\n    def find(self, selector):\n        elements = []\n        for element in self._elements:\n            elements.extend(element.find(selector))\n\n        return ElementCollection(elements)\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n\n# fmt: off\nELEMENT_CLASSES = [\n    # We put grid first because it is really just a <div> but we want the div class to\n    # be used if wrapping existing js elements that we have not tagged with a\n    # `data-pyscript-type` attribute (last one is the winner when it comes to this\n    # list).\n    grid,\n    # The rest in alphabetical order.\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Lookup tables to get an element class by its name or tag.\nELEMENT_CLASSES_BY_NAME = {cls.__name__: cls for cls in ELEMENT_CLASSES}\nELEMENT_CLASSES_BY_TAG = {cls.tag: cls for cls in ELEMENT_CLASSES}\n"
     },
     "websocket.py": "import js\nfrom pyscript.util import as_bytearray\n\ncode = \"code\"\nprotocols = \"protocols\"\nreason = \"reason\"\n\n\nclass EventMessage:\n    def __init__(self, event):\n        self._event = event\n\n    def __getattr__(self, attr):\n        value = getattr(self._event, attr)\n\n        if attr == \"data\" and not isinstance(value, str):\n            if hasattr(value, \"to_py\"):\n                return value.to_py()\n            # shims in MicroPython\n            return memoryview(as_bytearray(value))\n\n        return value\n\n\nclass WebSocket(object):\n    CONNECTING = 0\n    OPEN = 1\n    CLOSING = 2\n    CLOSED = 3\n\n    def __init__(self, **kw):\n        url = kw[\"url\"]\n        if protocols in kw:\n            socket = js.WebSocket.new(url, kw[protocols])\n        else:\n            socket = js.WebSocket.new(url)\n        object.__setattr__(self, \"_ws\", socket)\n\n        for t in [\"onclose\", \"onerror\", \"onmessage\", \"onopen\"]:\n            if t in kw:\n                socket[t] = kw[t]\n\n    def __getattr__(self, attr):\n        return getattr(self._ws, attr)\n\n    def __setattr__(self, attr, value):\n        if attr == \"onmessage\":\n            self._ws[attr] = lambda e: value(EventMessage(e))\n        else:\n            self._ws[attr] = value\n\n    def close(self, **kw):\n        if code in kw and reason in kw:\n            self._ws.close(kw[code], kw[reason])\n        elif code in kw:\n            self._ws.close(kw[code])\n        else:\n            self._ws.close()\n\n    def send(self, data):\n        if isinstance(data, str):\n            self._ws.send(data)\n        else:\n            buffer = js.Uint8Array.new(len(data))\n            for pos, b in enumerate(data):\n                buffer[pos] = b\n            self._ws.send(buffer)\n",
     "workers.py": "import js as _js\nfrom polyscript import workers as _workers\n\n_get = _js.Reflect.get\n\n\ndef _set(script, name, value=\"\"):\n    script.setAttribute(name, value)\n\n\n# this solves an inconsistency between Pyodide and MicroPython\n# @see https://github.com/pyscript/pyscript/issues/2106\nclass _ReadOnlyProxy:\n    def __getitem__(self, name):\n        return _get(_workers, name)\n\n    def __getattr__(self, name):\n        return _get(_workers, name)\n\n\nworkers = _ReadOnlyProxy()\n\n\nasync def create_named_worker(src=\"\", name=\"\", config=None, type=\"py\"):\n    from json import dumps\n\n    if not src:\n        raise ValueError(\"Named workers require src\")\n\n    if not name:\n        raise ValueError(\"Named workers require a name\")\n\n    s = _js.document.createElement(\"script\")\n    s.type = type\n    s.src = src\n    _set(s, \"worker\")\n    _set(s, \"name\", name)\n\n    if config:\n        _set(s, \"config\", isinstance(config, str) and config or dumps(config))\n\n    _js.document.body.append(s)\n    return await workers[name]\n"