Skip to content

Instantly share code, notes, and snippets.

@Ciantic
Last active January 28, 2016 18:25
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Ciantic/9db1b6281bd7a743ffb5 to your computer and use it in GitHub Desktop.
CustomElement inheritance in TypeScript (before it's fixed)
export declare class BaseCustomHTMLElement implements HTMLElement {
// Custom element specific
// http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
createdCallback(): void; // an instance of the element is created
attachedCallback(): void; // an instance was inserted into the document
detachedCallback(): void; // an instance was removed from the document
attributeChangedCallback(attrName: string, oldVal: any, newVal: any): void; // an attribute was added, removed, or updated
// Copy & Pasted all from HTMLElement interface
// interface HTMLElement extends Element, ElementCSSInlineStyle, MSEventAttachmentTarget, MSNodeExtensions
onmouseleave: (ev: MouseEvent) => any;
onbeforecut: (ev: DragEvent) => any;
onkeydown: (ev: KeyboardEvent) => any;
onmove: (ev: MSEventObj) => any;
onkeyup: (ev: KeyboardEvent) => any;
onreset: (ev: Event) => any;
onhelp: (ev: Event) => any;
ondragleave: (ev: DragEvent) => any;
className: string;
onfocusin: (ev: FocusEvent) => any;
onseeked: (ev: Event) => any;
recordNumber: any;
title: string;
parentTextEdit: Element;
outerHTML: string;
ondurationchange: (ev: Event) => any;
offsetHeight: number;
all: HTMLCollection;
onblur: (ev: FocusEvent) => any;
dir: string;
onemptied: (ev: Event) => any;
onseeking: (ev: Event) => any;
oncanplay: (ev: Event) => any;
ondeactivate: (ev: UIEvent) => any;
ondatasetchanged: (ev: MSEventObj) => any;
onrowsdelete: (ev: MSEventObj) => any;
sourceIndex: number;
onloadstart: (ev: Event) => any;
onlosecapture: (ev: MSEventObj) => any;
ondragenter: (ev: DragEvent) => any;
oncontrolselect: (ev: MSEventObj) => any;
onsubmit: (ev: Event) => any;
behaviorUrns: MSBehaviorUrnsCollection;
scopeName: string;
onchange: (ev: Event) => any;
id: string;
onlayoutcomplete: (ev: MSEventObj) => any;
uniqueID: string;
onbeforeactivate: (ev: UIEvent) => any;
oncanplaythrough: (ev: Event) => any;
onbeforeupdate: (ev: MSEventObj) => any;
onfilterchange: (ev: MSEventObj) => any;
offsetParent: Element;
ondatasetcomplete: (ev: MSEventObj) => any;
onsuspend: (ev: Event) => any;
readyState: any;
onmouseenter: (ev: MouseEvent) => any;
innerText: string;
onerrorupdate: (ev: MSEventObj) => any;
onmouseout: (ev: MouseEvent) => any;
parentElement: HTMLElement;
onmousewheel: (ev: MouseWheelEvent) => any;
onvolumechange: (ev: Event) => any;
oncellchange: (ev: MSEventObj) => any;
onrowexit: (ev: MSEventObj) => any;
onrowsinserted: (ev: MSEventObj) => any;
onpropertychange: (ev: MSEventObj) => any;
filters: Object;
children: HTMLCollection;
ondragend: (ev: DragEvent) => any;
onbeforepaste: (ev: DragEvent) => any;
ondragover: (ev: DragEvent) => any;
offsetTop: number;
onmouseup: (ev: MouseEvent) => any;
ondragstart: (ev: DragEvent) => any;
onbeforecopy: (ev: DragEvent) => any;
ondrag: (ev: DragEvent) => any;
innerHTML: string;
onmouseover: (ev: MouseEvent) => any;
lang: string;
uniqueNumber: number;
onpause: (ev: Event) => any;
tagUrn: string;
onmousedown: (ev: MouseEvent) => any;
onclick: (ev: MouseEvent) => any;
onwaiting: (ev: Event) => any;
onresizestart: (ev: MSEventObj) => any;
offsetLeft: number;
isTextEdit: boolean;
isDisabled: boolean;
onpaste: (ev: DragEvent) => any;
canHaveHTML: boolean;
onmoveend: (ev: MSEventObj) => any;
language: string;
onstalled: (ev: Event) => any;
onmousemove: (ev: MouseEvent) => any;
style: MSStyleCSSProperties;
isContentEditable: boolean;
onbeforeeditfocus: (ev: MSEventObj) => any;
onratechange: (ev: Event) => any;
contentEditable: string;
tabIndex: number;
document: Document;
onprogress: (ev: any) => any;
ondblclick: (ev: MouseEvent) => any;
oncontextmenu: (ev: MouseEvent) => any;
onloadedmetadata: (ev: Event) => any;
onafterupdate: (ev: MSEventObj) => any;
onerror: (ev: Event) => any;
onplay: (ev: Event) => any;
onresizeend: (ev: MSEventObj) => any;
onplaying: (ev: Event) => any;
isMultiLine: boolean;
onfocusout: (ev: FocusEvent) => any;
onabort: (ev: UIEvent) => any;
ondataavailable: (ev: MSEventObj) => any;
hideFocus: boolean;
onreadystatechange: (ev: Event) => any;
onkeypress: (ev: KeyboardEvent) => any;
onloadeddata: (ev: Event) => any;
onbeforedeactivate: (ev: UIEvent) => any;
outerText: string;
disabled: boolean;
onactivate: (ev: UIEvent) => any;
accessKey: string;
onmovestart: (ev: MSEventObj) => any;
onselectstart: (ev: Event) => any;
onfocus: (ev: FocusEvent) => any;
ontimeupdate: (ev: Event) => any;
onresize: (ev: UIEvent) => any;
oncut: (ev: DragEvent) => any;
onselect: (ev: UIEvent) => any;
ondrop: (ev: DragEvent) => any;
offsetWidth: number;
oncopy: (ev: DragEvent) => any;
onended: (ev: Event) => any;
onscroll: (ev: UIEvent) => any;
onrowenter: (ev: MSEventObj) => any;
onload: (ev: Event) => any;
canHaveChildren: boolean;
oninput: (ev: Event) => any;
dragDrop(): boolean;
scrollIntoView(top?: boolean): void;
addFilter(filter: Object): void;
setCapture(containerCapture?: boolean): void;
focus(): void;
getAdjacentText(where: string): string;
insertAdjacentText(where: string, text: string): void;
getElementsByClassName(classNames: string): NodeList;
setActive(): void;
removeFilter(filter: Object): void;
blur(): void;
clearAttributes(): void;
releaseCapture(): void;
createControlRange(): ControlRangeCollection;
removeBehavior(cookie: number): boolean;
contains(child: HTMLElement): boolean;
click(): void;
insertAdjacentElement(position: string, insertedElement: Element): Element;
mergeAttributes(source: HTMLElement, preserveIdentity?: boolean): void;
replaceAdjacentText(where: string, newText: string): string;
applyElement(apply: Element, where?: string): Element;
addBehavior(bstrUrl: string, factory?: any): number;
insertAdjacentHTML(where: string, html: string): void;
// HTMLElement 2
onmscontentzoom: (ev: any) => any;
oncuechange: (ev: Event) => any;
spellcheck: boolean;
classList: DOMTokenList;
onmsmanipulationstatechanged: (ev: any) => any;
draggable: boolean;
// HTMLElement 3
dataset: DOMStringMap;
hidden: boolean;
msGetInputContext(): MSInputMethodContext;
// HTMLElement 4
addEventListener(type: "pointerenter", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointerout", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointerdown", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointerup", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointercancel", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointerover", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointermove", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pointerleave", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerdown", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgotpointercapture", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgesturedoubletap", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerhover", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgesturehold", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointermove", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgesturechange", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgesturestart", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointercancel", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgestureend", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msgesturetap", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerout", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "msinertiastart", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mslostpointercapture", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerover", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerup", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "lostpointercapture", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerenter", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "gotpointercapture", listener: (ev: PointerEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mspointerleave", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: "mouseleave", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "beforecut", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "keydown", listener: (ev: KeyboardEvent) => any, useCapture?: boolean): void;
addEventListener(type: "move", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "keyup", listener: (ev: KeyboardEvent) => any, useCapture?: boolean): void;
addEventListener(type: "reset", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "help", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "dragleave", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "focusin", listener: (ev: FocusEvent) => any, useCapture?: boolean): void;
addEventListener(type: "seeked", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "durationchange", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "blur", listener: (ev: FocusEvent) => any, useCapture?: boolean): void;
addEventListener(type: "emptied", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "seeking", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "canplay", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "deactivate", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "datasetchanged", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "rowsdelete", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "loadstart", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "losecapture", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "dragenter", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "controlselect", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "submit", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "change", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "layoutcomplete", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "beforeactivate", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "canplaythrough", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "beforeupdate", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "filterchange", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "datasetcomplete", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "suspend", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "mouseenter", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "errorupdate", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "mouseout", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mousewheel", listener: (ev: MouseWheelEvent) => any, useCapture?: boolean): void;
addEventListener(type: "volumechange", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "cellchange", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "rowexit", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "rowsinserted", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "propertychange", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "dragend", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "beforepaste", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "dragover", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mouseup", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "dragstart", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "beforecopy", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "drag", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "mouseover", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "pause", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "mousedown", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "click", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "waiting", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "resizestart", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "paste", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "moveend", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "stalled", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "mousemove", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "beforeeditfocus", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "ratechange", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "progress", listener: (ev: ProgressEvent) => any, useCapture?: boolean): void;
addEventListener(type: "dblclick", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "contextmenu", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
addEventListener(type: "loadedmetadata", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "afterupdate", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "error", listener: (ev: ErrorEvent) => any, useCapture?: boolean): void;
addEventListener(type: "play", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "resizeend", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "playing", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "focusout", listener: (ev: FocusEvent) => any, useCapture?: boolean): void;
addEventListener(type: "abort", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "dataavailable", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "readystatechange", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "keypress", listener: (ev: KeyboardEvent) => any, useCapture?: boolean): void;
addEventListener(type: "loadeddata", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "beforedeactivate", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "activate", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "movestart", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "selectstart", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "focus", listener: (ev: FocusEvent) => any, useCapture?: boolean): void;
addEventListener(type: "timeupdate", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "resize", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "cut", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "select", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "drop", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "copy", listener: (ev: DragEvent) => any, useCapture?: boolean): void;
addEventListener(type: "ended", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "scroll", listener: (ev: UIEvent) => any, useCapture?: boolean): void;
addEventListener(type: "rowenter", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "load", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "input", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "mscontentzoom", listener: (ev: MSEventObj) => any, useCapture?: boolean): void;
addEventListener(type: "cuechange", listener: (ev: Event) => any, useCapture?: boolean): void;
addEventListener(type: "msmanipulationstatechanged", listener: (ev: any) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
// interface Element extends Node, NodeSelector, ElementTraversal {
scrollTop: number;
clientLeft: number;
scrollLeft: number;
tagName: string;
clientWidth: number;
scrollWidth: number;
clientHeight: number;
clientTop: number;
scrollHeight: number;
getAttribute(name?: string): string;
getElementsByTagNameNS(namespaceURI: string, localName: string): NodeList;
hasAttributeNS(namespaceURI: string, localName: string): boolean;
getBoundingClientRect(): ClientRect;
getAttributeNS(namespaceURI: string, localName: string): string;
getAttributeNodeNS(namespaceURI: string, localName: string): Attr;
setAttributeNodeNS(newAttr: Attr): Attr;
msMatchesSelector(selectors: string): boolean;
hasAttribute(name: string): boolean;
removeAttribute(name?: string): void;
setAttributeNS(namespaceURI: string, qualifiedName: string, value: string): void;
getAttributeNode(name: string): Attr;
fireEvent(eventName: string, eventObj?: any): boolean;
getElementsByTagName(name: "a"): NodeListOf<HTMLAnchorElement>;
getElementsByTagName(name: "abbr"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "address"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "area"): NodeListOf<HTMLAreaElement>;
getElementsByTagName(name: "article"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "aside"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "audio"): NodeListOf<HTMLAudioElement>;
getElementsByTagName(name: "b"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "base"): NodeListOf<HTMLBaseElement>;
getElementsByTagName(name: "bdi"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "bdo"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "blockquote"): NodeListOf<HTMLQuoteElement>;
getElementsByTagName(name: "body"): NodeListOf<HTMLBodyElement>;
getElementsByTagName(name: "br"): NodeListOf<HTMLBRElement>;
getElementsByTagName(name: "button"): NodeListOf<HTMLButtonElement>;
getElementsByTagName(name: "canvas"): NodeListOf<HTMLCanvasElement>;
getElementsByTagName(name: "caption"): NodeListOf<HTMLTableCaptionElement>;
getElementsByTagName(name: "cite"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "code"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "col"): NodeListOf<HTMLTableColElement>;
getElementsByTagName(name: "colgroup"): NodeListOf<HTMLTableColElement>;
getElementsByTagName(name: "datalist"): NodeListOf<HTMLDataListElement>;
getElementsByTagName(name: "dd"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "del"): NodeListOf<HTMLModElement>;
getElementsByTagName(name: "dfn"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "div"): NodeListOf<HTMLDivElement>;
getElementsByTagName(name: "dl"): NodeListOf<HTMLDListElement>;
getElementsByTagName(name: "dt"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "em"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "embed"): NodeListOf<HTMLEmbedElement>;
getElementsByTagName(name: "fieldset"): NodeListOf<HTMLFieldSetElement>;
getElementsByTagName(name: "figcaption"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "figure"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "footer"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "form"): NodeListOf<HTMLFormElement>;
getElementsByTagName(name: "h1"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "h2"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "h3"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "h4"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "h5"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "h6"): NodeListOf<HTMLHeadingElement>;
getElementsByTagName(name: "head"): NodeListOf<HTMLHeadElement>;
getElementsByTagName(name: "header"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "hgroup"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "hr"): NodeListOf<HTMLHRElement>;
getElementsByTagName(name: "html"): NodeListOf<HTMLHtmlElement>;
getElementsByTagName(name: "i"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "iframe"): NodeListOf<HTMLIFrameElement>;
getElementsByTagName(name: "img"): NodeListOf<HTMLImageElement>;
getElementsByTagName(name: "input"): NodeListOf<HTMLInputElement>;
getElementsByTagName(name: "ins"): NodeListOf<HTMLModElement>;
getElementsByTagName(name: "kbd"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "label"): NodeListOf<HTMLLabelElement>;
getElementsByTagName(name: "legend"): NodeListOf<HTMLLegendElement>;
getElementsByTagName(name: "li"): NodeListOf<HTMLLIElement>;
getElementsByTagName(name: "link"): NodeListOf<HTMLLinkElement>;
getElementsByTagName(name: "main"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "map"): NodeListOf<HTMLMapElement>;
getElementsByTagName(name: "mark"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "menu"): NodeListOf<HTMLMenuElement>;
getElementsByTagName(name: "meta"): NodeListOf<HTMLMetaElement>;
getElementsByTagName(name: "nav"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "noscript"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "object"): NodeListOf<HTMLObjectElement>;
getElementsByTagName(name: "ol"): NodeListOf<HTMLOListElement>;
getElementsByTagName(name: "optgroup"): NodeListOf<HTMLOptGroupElement>;
getElementsByTagName(name: "option"): NodeListOf<HTMLOptionElement>;
getElementsByTagName(name: "p"): NodeListOf<HTMLParagraphElement>;
getElementsByTagName(name: "param"): NodeListOf<HTMLParamElement>;
getElementsByTagName(name: "pre"): NodeListOf<HTMLPreElement>;
getElementsByTagName(name: "progress"): NodeListOf<HTMLProgressElement>;
getElementsByTagName(name: "q"): NodeListOf<HTMLQuoteElement>;
getElementsByTagName(name: "rp"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "rt"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "ruby"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "s"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "samp"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "script"): NodeListOf<HTMLScriptElement>;
getElementsByTagName(name: "section"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "select"): NodeListOf<HTMLSelectElement>;
getElementsByTagName(name: "small"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "source"): NodeListOf<HTMLSourceElement>;
getElementsByTagName(name: "span"): NodeListOf<HTMLSpanElement>;
getElementsByTagName(name: "strong"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "style"): NodeListOf<HTMLStyleElement>;
getElementsByTagName(name: "sub"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "summary"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "sup"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "table"): NodeListOf<HTMLTableElement>;
getElementsByTagName(name: "tbody"): NodeListOf<HTMLTableSectionElement>;
getElementsByTagName(name: "td"): NodeListOf<HTMLTableDataCellElement>;
getElementsByTagName(name: "textarea"): NodeListOf<HTMLTextAreaElement>;
getElementsByTagName(name: "tfoot"): NodeListOf<HTMLTableSectionElement>;
getElementsByTagName(name: "th"): NodeListOf<HTMLTableHeaderCellElement>;
getElementsByTagName(name: "thead"): NodeListOf<HTMLTableSectionElement>;
getElementsByTagName(name: "title"): NodeListOf<HTMLTitleElement>;
getElementsByTagName(name: "tr"): NodeListOf<HTMLTableRowElement>;
getElementsByTagName(name: "track"): NodeListOf<HTMLTrackElement>;
getElementsByTagName(name: "u"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "ul"): NodeListOf<HTMLUListElement>;
getElementsByTagName(name: "var"): NodeListOf<HTMLElement>;
getElementsByTagName(name: "video"): NodeListOf<HTMLVideoElement>;
getElementsByTagName(name: "wbr"): NodeListOf<HTMLElement>;
getElementsByTagName(name: string): NodeList;
getClientRects(): ClientRectList;
setAttributeNode(newAttr: Attr): Attr;
removeAttributeNode(oldAttr: Attr): Attr;
setAttribute(name?: string, value?: string): void;
removeAttributeNS(namespaceURI: string, localName: string): void;
// interface Element extends GlobalEventHandlers {
onlostpointercapture: (ev: PointerEvent) => any;
onmspointerenter: (ev: any) => any;
ongotpointercapture: (ev: PointerEvent) => any;
onmspointerleave: (ev: any) => any;
msZoomTo(args: MsZoomToOptions): void;
setPointerCapture(pointerId: number): void;
msGetUntransformedBounds(): ClientRect;
releasePointerCapture(pointerId: number): void;
msRequestFullscreen(): void;
// interface GlobalEventHandlers {
onpointerenter: (ev: PointerEvent) => any;
onpointerout: (ev: PointerEvent) => any;
onpointerdown: (ev: PointerEvent) => any;
onpointerup: (ev: PointerEvent) => any;
onpointercancel: (ev: PointerEvent) => any;
onpointerover: (ev: PointerEvent) => any;
onpointermove: (ev: PointerEvent) => any;
onpointerleave: (ev: PointerEvent) => any;
// interface Element {
msRegionOverflow: string;
onmspointerdown: (ev: any) => any;
onmsgotpointercapture: (ev: any) => any;
onmsgesturedoubletap: (ev: any) => any;
onmspointerhover: (ev: any) => any;
onmsgesturehold: (ev: any) => any;
onmspointermove: (ev: any) => any;
onmsgesturechange: (ev: any) => any;
onmsgesturestart: (ev: any) => any;
onmspointercancel: (ev: any) => any;
onmsgestureend: (ev: any) => any;
onmsgesturetap: (ev: any) => any;
onmspointerout: (ev: any) => any;
onmsinertiastart: (ev: any) => any;
onmslostpointercapture: (ev: any) => any;
onmspointerover: (ev: any) => any;
msContentZoomFactor: number;
onmspointerup: (ev: any) => any;
msGetRegionContent(): MSRangeCollection;
msReleasePointerCapture(pointerId: number): void;
msSetPointerCapture(pointerId: number): void;
// interface Node extends EventTarget {
nodeType: number;
previousSibling: Node;
localName: string;
namespaceURI: string;
textContent: string;
parentNode: Node;
nextSibling: Node;
nodeValue: string;
lastChild: Node;
childNodes: NodeList;
nodeName: string;
ownerDocument: Document;
attributes: NamedNodeMap;
firstChild: Node;
prefix: string;
removeChild(oldChild: Node): Node;
appendChild(newChild: Node): Node;
isSupported(feature: string, version: string): boolean;
isEqualNode(arg: Node): boolean;
lookupPrefix(namespaceURI: string): string;
isDefaultNamespace(namespaceURI: string): boolean;
compareDocumentPosition(other: Node): number;
normalize(): void;
isSameNode(other: Node): boolean;
hasAttributes(): boolean;
lookupNamespaceURI(prefix: string): string;
cloneNode(deep?: boolean): Node;
hasChildNodes(): boolean;
replaceChild(newChild: Node, oldChild: Node): Node;
insertBefore(newChild: Node, refChild?: Node): Node;
ENTITY_REFERENCE_NODE: number;
ATTRIBUTE_NODE: number;
DOCUMENT_FRAGMENT_NODE: number;
TEXT_NODE: number;
ELEMENT_NODE: number;
COMMENT_NODE: number;
DOCUMENT_POSITION_DISCONNECTED: number;
DOCUMENT_POSITION_CONTAINED_BY: number;
DOCUMENT_POSITION_CONTAINS: number;
DOCUMENT_TYPE_NODE: number;
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
DOCUMENT_NODE: number;
ENTITY_NODE: number;
PROCESSING_INSTRUCTION_NODE: number;
CDATA_SECTION_NODE: number;
NOTATION_NODE: number;
DOCUMENT_POSITION_FOLLOWING: number;
DOCUMENT_POSITION_PRECEDING: number;
// interface EventTarget {
//addEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
removeEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
dispatchEvent(evt: Event): boolean;
// interface NodeSelector {
querySelectorAll(selectors: string): NodeList;
querySelector(selectors: string): Element;
// interface ElementTraversal {
childElementCount: number;
previousElementSibling: Element;
lastElementChild: Element;
nextElementSibling: Element;
firstElementChild: Element;
// interface ElementCSSInlineStyle {
runtimeStyle: MSStyleCSSProperties;
currentStyle: MSCurrentStyleCSSProperties;
doScroll(component?: any): void;
componentFromPoint(x: number, y: number): string;
// interface MSEventAttachmentTarget {
attachEvent(event: string, listener: EventListener): boolean;
detachEvent(event: string, listener: EventListener): void;
// interface MSNodeExtensions {
swapNode(otherNode: Node): Node;
removeNode(deep?: boolean): Node;
replaceNode(replacement: Node): Node;
}
export class CustomHTMLElement extends BaseCustomHTMLElement {
}
export function register(name: string, klass: any) {
delete klass.prototype['constructor'];
(<any> document).registerElement(name, {
prototype : klass.prototype
});
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<!-- HACK! To allow normal inheritance in TypeScript -->
<script>BaseCustomHTMLElement = window.HTMLElement</script>
<!-- DOWNLOAD REQUIRE.JS! -->
<script src="require.js"></script>
<script src="index.js"></script>
</head>
<body>
<example-element>Yello!</example-element>
</body>
</html>
import myelement = require('./MyElement');
// Register required since TypeScript omits unused imports, so we have to introduce explicit registration
myelement.register();
var t = document.querySelector("example-element");
t.myTest();
import customelement = require('./customelement');
export class MyElement extends customelement.CustomHTMLElement {
public myTest() {
// "this" is fully qualified, includes all methods e.g. addEventListener, dispatchEvent
console.log("this", this);
console.dir(this);
}
}
export function register() {
customelement.register("example-element", MyElement);
}
@Ciantic
Copy link
Author

Ciantic commented Jul 5, 2014

Warning: May contain typos, I didn't try exactly this code.

Also add custom-elements.min.js for document.registerElement as a polyfill for older browsers if you want from here: https://www.npmjs.org/package/custom-elements

@Ciantic
Copy link
Author

Ciantic commented May 7, 2015

I hereby place this code in public domain

@basarat
Copy link

basarat commented Jun 23, 2015

Update. The following just works now 🌹 microsoft/TypeScript#574 (comment)

class MyComponent extends HTMLElement {    
}

@nealeu
Copy link

nealeu commented Jan 28, 2016

@basarat: I've just arrived here via microsoft/TypeScript#1168, and it looks like I still need this gist when using tsc 1.7.5.

The following:

interface Document {
    registerElement(tagName: string, implementation: HTMLElement );
}

class MyList extends HTMLElement {
}

document.registerElement('my-list', MyList);

gives me:

Argument of type 'typeof MyList' is not assignable to parameter of type 'HTMLElement'.
  Property 'accessKey' is missing in type 'typeof MyList'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment