Typescript: ShadowRoot interface and attachShadow function are missing from type definitions

[ghost]

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.

[SetTrend]

@mhegazy : It looks like ShadowRoot still isn't implemented in the library declarations, or getRootNode() seems to return the wrong type (Node instead of ShadowRoot).

When I write ...

let h = this.getRootNode().host;

... I get a TS2339 compiler error: "Property 'host' not available for type 'Node'."

[17biubiu]

me too, the version of ts is [email protected]. Property 'createShadowRoot' does not exist on type 'HTMLElement'。how to solve it?

[SetTrend]

In the meantime I got a great explanation why this doesn't work the way we all expect:

https://github.com/whatwg/dom/issues/739

MDN already updated their docs to clarify the situation.

[bennypowers]

Until TypeScript corrects their lib, we'll have to

declare global {
  interface Node {
    getRootNode(options?: GetRootNodeOptions): Node|ShadowRoot;
  }
}

[SetTrend]

Actually, Node is a base class of ShadowRoot. So, the current interface is correct.

See: https://www.w3.org/TR/dom41/#shadowroot