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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions