# main
HTMLAttributes<HTMLElement>
npm i html-vdom
|
pnpm add html-vdom
|
yarn add html-vdom
|
from-elementview source
```tsx
/** @jsxImportSource html-vdom */
import { render } from 'html-vdom'
import { fromElement } from 'html-vdom/from-element'
class FooElement extends HTMLElement {
root = this.attachShadow({ mode: 'open' })
set who(name: string) {
this.root.innerHTML = 'Hello, ' + name
}
}
const Foo = fromElement(FooElement)
render(
simpleview source```tsx /** @jsxImportSource html-vdom */ import { $, render } from 'html-vdom' const App: $<{ who: string }> = ({ who }) =>
with-hookview source```tsx /** @jsxImportSource html-vdom */ import { $, Hook, hook, render } from 'html-vdom' let greeting = 'Hello' let update: Hook const App: $<{ who: string }> = ({ who }) => { update = hook return
EventHandler(e) =>
HTMLAttributes #
aria-relevant "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
style null | string | false | Partial<CSSStyleDeclaration> | StandardProperties<0 | string & {}, string & {}>
HTMLAutocomplete "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-year" | "bday-day" | "bday-month" | "billing" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "fax" | "given-name" | "home" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "mobile" | "name" | "new-password" | "nickname" | "organization" | "organization-title" | "pager" | "photo" | "postal-code" | "sex" | "shipping" | "street-address" | "tel-area-code" | "tel" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username" | "work"
HTMLIframeSandbox "allow-downloads-without-user-activation" | "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-storage-access-by-user-activation" | "allow-top-navigation" | "allow-top-navigation-by-user-activation"
HTMLLinkAs "audio" | "document" | "embed" | "fetch" | "font" | "image" | "object" | "script" | "style" | "track" | "video" | "worker"
HTMLReferrerPolicy "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
HTMLRole "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "command" | "complementary" | "composite" | "contentinfo" | "definition" | "deletion" | "dialog" | "directory" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "input" | "insertion" | "landmark" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "range" | "region" | "roletype" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "section" | "sectionhead" | "select" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "structure" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | "widget" | "window"
createProps(doc, el, type, props, attrs, cacheRef) html(tagName, options) render(n) updateProps(doc, el, type, next, cacheRef)