Documentation: Adding Custom Element Data to HTML/CSS language providers for web components

[hybridherbst]

I'm trying to understand how/if I can add custom data for HTML/CSS language providers in modern-monaco. It would allow showing intellisense for custom HTML elements / web components.

I believe modern-monaco has all the pieces in place already, as this type of Custom Data is already used for DOM intellisense (coming from here:

modern-monaco/src/lsp/html/worker.ts

Line 35 in c5a540c

const customDataProviders: htmlService.IHTMLDataProvider[] = [];

), but I can't figure out how I can pass additional data to it, or how to do it automagically from e.g. some package.json configuration from the pulled-in packages.

---

VS Code does this from the html.customData settings entry. One common approach is that packages have a file custom-elements.json at the root, or have a package.json entry called customElements that points at a json file within that package.

Here's an example:

{
    "html.customData": [
        "./node_modules/@needle-tools/engine/custom-elements.json"
    ]
}

This allows having code like

<needle-engine src=""></needle-engine>

and getting intellisense for that custom element:

I would like to be able to provide that intellisense in modern-monaco as well, as it fits nicely with the automatic types from esm.sh.

I think in VS Code the feature lives approximately here: https://github.com/microsoft/vscode/blob/4a04ab66fcce9de3cf8770245c08124aca1eadc9/extensions/html-language-features/client/src/customData.ts#L11

Thanks!

[ije]

you can define custom elements by add lsp.html.customTags option:

lazy({
  lsp: {
    html: {
      customTags: [ /* your custom tags */ ]
    }
  }
})

types:

modern-monaco/types/lsp.d.ts

Line 107 in c5a540c

customTags?: ITagData[];

[hybridherbst]

Thanks, I will try that!

And is there a callback for getting a list of packages that modern-monaco has found in the importmap (where types are pulled from) and acting upon that – e.g. checking if they have custom element data and then passing it to the LSP?

[ije]

And is there a callback for getting a list of packages that modern-monaco has found in the importmap (where types are pulled from) and acting upon that – e.g. checking if they have custom element data and then passing it to the LSP?

i don't think it's possible, the typescript lsp doesn't share worker with html lsp.

[hybridherbst]

Understood. So it would basically require something like adding a callback for "packages found" and then communicating between the workers?

[ije]

could be.