Web Components support in HTML files

[octref]

Related:

• [html] Add support for custom tag providers for HTML #2784
• https://github.com/octref/vuetypes

Problem

WebComponent offers a JavaScript API to define HTML tags / attributes. We want people to get completion, diagnostics and other language features that's already available to the HTML server.

Approach

We plan to:

• Define a JSON schema for tag/attribute definition JSON file (like dts for TS projects)
• Allow user to specify a list of such tag/attribute JSON files as a setting

However, there is currently no way to auto-generate such a JSON file from user-authored JS files. In the short term, these files are most likely to be hand-written. In the long term, we hope we can standardize such a format and find a way to auto-generate these JSON files with the WebComponents community.

Supported Features

Working Out of the box

• DocumentHighlight
• DocumentSymbol
• Folding

Plan to Support

What we'll ship for November iteration:

• Completion: HTML tags.
• 🏃 Completion: HTML attributes. Attribute itself yes, attribute description 👉 HTML attribute completion description #66230
• Hover: Hovering over HTML tags / attributes should show descriptions.
  - [ ] Diagnostics:
  - Required attributes not included
  - Attribute value is not one of attribute's enum value
  - [ ] TextMate Grammar: Color web component tags/attributes differently

Hard to Support

We do want these features, but there is no clear way to implement these features.

• Jump to definition: Jumping to definition on <my-tag> should go to the JS file that defines such a class.
• Find References / Rename: Requires project understanding, but our HTML support is single file.

No plan to Support

• Signature Help: It does not make sense when Completion offers snippets.
• QuickFix: No sensible quick fix that we can offer.

[octref]

Let's take this file for example: https://github.com/mdn/web-components-examples/blob/master/composed-composed-path/main.js

The JSON could look like this:

{
  "components": [
    {
      "name": "open-shadow",
      "description": "Open Shadow DOM Component",
      "attributes": [
        {
          "name": "text",
          "description": "The text inside the component",
          "required": true
        }
      ]
    },
    {
      "name": "closed-shadow",
      "description": "Closed Shadow DOM Component",
      "attributes": [
        {
          "name": "text",
          "description": "The text inside the component",
          "required": true
        }
      ]
    }
  ]
}

[octref]

What we have now:

Here is how it works:

• You specify html.experimental.custom.tags and html.experimental.custom.attributes
• VS Code loads those tag/attribute definitions and offer completion, hover and other common HTML features

I'll open up issues in WebComponent related repos to get more feedback.