Skip to content

Implement missing special HTMLElement classes #41

@benStre

Description

@benStre

A lot of native HTMLElement implementations are still missing in our fork of deno_dom.
The missing elements can be found in deno-dom/src/dom/types/tags.ts (all class names that are commented out).

To implement a new HTMLElement sub class (e.g. HTMLXElement), follow these steps (the order is important):

  1. Make sure you have the latest version of uix with all submodules (uix-dom, deno_dom) recursively loaded
  2. Create a new file called html-x-element.ts in deno-dom/src/dom/html-elements
  3. Create a class that extends HTMLElement and add the required additional properties and methods following the HTML spec
    import { HTMLElement } from "../elements/html-element.ts";
    
    export class HTMLXElement extends HTMLElement {
       // custom implementation ...
    }
  4. Export the newly created file from src/api.ts:
    export * from "./dom/html-elements/html-x-element.ts"
  5. Add the correct type to deno-dom/src/dom/types/tags.ts (remove the element type that is commented out):
    import { HTMLXElement } from "../html-elements/html-x-element.ts";
    
    export interface HTMLElementTagNameMap {
      "x": HTMLXElement
    }
  6. Add an element tag name mapping in uix-dom/dom/mod.ts
    elements.define("X", denoDom.HTMLXElement)
  7. Add a global type definition in uix/src/app/dom-global.ts:
    const HTMLInputElement: typeof api.HTMLXElement
    type HTMLInputElement = api.HTMLXElement

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions