ShadowRoot interface and attachShadow function are missing from type definitions

TypeScript Version: 1.8.0 / nightly (2.0.0-dev.201xxxxx)

Code

// A *self-contained* demonstration of the problem follows...
class CustomElement extends HTMLElement {
    private shadowDom : ShadowRoot;

    createdCallback() : void {
        this.shadowDom = this.attachShadow({mode: "closed"});
    }
}

Expected behavior:
ShadowRoot is recognized as a valid type, and the HTMLElement's attachShadow function is recognized as per the DOM standard.

Actual behavior:
Neither ShadorRoot nor the attachShadow functions are recognized.

[kitsonk]

The Shadow DOM is still not implemented in many browsers. Interfaces are open ended, so these can be declared yourself.

[bradleyayers]

@Fairmill here's what I ended up using in my project: (based on https://www.w3.org/TR/shadow-dom/)

// shadow-dom.d.ts
declare global {
    type ShadowRootMode = "open" | "closed";

    interface ShadowRootInit {
        mode: ShadowRootMode;
        delegatesFocus?: boolean;
    }

    interface CaretPosition {
        offsetNode: Node;
        offset: number;
        getClientRect(): ClientRect;
    }

    interface DocumentOrShadowRoot {
        getSelection(): Selection | null;
        elementFromPoint(x: number, y: number): Element | null;
        elementsFromPoint(x: number, y: number): NodeListOf<Element>;
        caretPositionFromPoint(x: number, y: number): CaretPosition | null;
        activeElement: Element | null;
        styleSheets: StyleSheetList;
    }

    interface ShadowRoot extends DocumentFragment, DocumentOrShadowRoot {
        host: HTMLElement;
        mode: ShadowRootMode;
    }

    interface Document extends DocumentOrShadowRoot {}

    interface AssignedNodesOptions {
        flatten: boolean = false;
    }

    interface HTMLSlotElement extends HTMLElement {
        name: string;
        assignedNodes(options?: AssignedNodesOptions): NodeList;
    }

    interface Element {
        attachShadow(shadowRootInitDict: ShadowRootInit): ShadowRoot;
        assignedSlot: HTMLSlotElement | null;
        slot: string;
        shadowRoot: ShadowRoot | null;
    }
}

export { }

[marcoms]

Could this be revisited? V1 seems a lot better on caniuse - http://caniuse.com/#feat=shadowdomv1

[klebba]

@kitsonk

Please consider reopening this issue -- ShadowDOM V1 support is now imminent in FireFox and has already landed in Chrome and Safari:

• https://twitter.com/firefoxnightly/status/1001104178146611202
• https://caniuse.com/#feat=shadowdomv1

[emilio-martinez]

I agree. This issue is at a point where it should be revisited soon.

[kitsonk]

@klebba I am not part of the TypeScript team.

[kitsonk]

And the issue is still open.

[mhegazy]

This should be fixed in typescript@next already.