Language Server
Language Server Protocol implementation for custom elements. See LSP Integration for editor setup and Using LSP Features for usage guidance.
Supported LSP Methods
Text Document Features
textDocument/hover- Show element and attribute documentation on hovertextDocument/completion- Provide tag and attribute completion suggestionstextDocument/definition- Jump to custom element source definitionstextDocument/diagnostic- Pull-based diagnostics (LSP 3.17); falls back to push viatextDocument/publishDiagnosticsfor older clientstextDocument/codeAction- Provide one-click autofixes for validation errorstextDocument/inlayHint- Show attribute type annotations and slot biscuits inlinetextDocument/didOpen- Track when documents are opened in the editortextDocument/didChange- Handle incremental document changestextDocument/didClose- Clean up resources when documents are closed
Workspace Features
workspace/symbol- Search and navigate custom elements across the entire workspaceworkspace/diagnostic- Workspace-wide pull diagnostics (LSP 3.17)workspace/didChangeConfiguration- Update server settings at runtime
Server Lifecycle
initialize- Establish server capabilities and workspace configurationshutdown- Gracefully terminate the language server$/setTrace- Control debug logging verbosity (LSP standard)
Configuration
Settings
The LSP server reads settings from the cem namespace in initializationOptions and workspace/didChangeConfiguration. Settings can be changed at runtime without restarting the server.
| Setting | Type | Default | Description |
|---|---|---|---|
inlayHints | boolean | true | Show inline type annotations for attributes and slot names |
VS Code Example
{
"cem.inlayHints": true
}Neovim Example
settings = {
cem = {
inlayHints = true,
},
}Initialization Options
The LSP server accepts custom initialization options for loading additional packages:
{
"initializationOptions": {
"additionalPackages": [
"npm:@rhds/elements@2.0.0",
"https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb/",
"jsr:@example/elements"
],
"cem": {
"inlayHints": true
}
}
}VS Code Example
In your VS Code settings.json:
{
"cem.additionalPackages": [
"npm:@rhds/elements@2.0.0",
"https://cdn.jsdelivr.net/npm/@example/components/"
]
}The VS Code extension passes these as initializationOptions.additionalPackages to the LSP server.
Supported Specifiers
| Format | Example |
|---|---|
| npm specifier | npm:@scope/package@version |
| jsr specifier | jsr:@scope/package |
| CDN URL | https://cdn.jsdelivr.net/npm/@scope/package/ |
Note: URLs must point to the package root (where package.json lives). The server reads the customElements field from package.json to locate the manifest.
Protocol Features
Pull Diagnostics (LSP 3.17)
When the client supports LSP 3.17 pull diagnostics (textDocument/diagnostic), the server uses the pull model instead of push notifications. This reduces server-initiated traffic and enables caching. Clients that do not advertise diagnostic capability automatically fall back to push via textDocument/publishDiagnostics.
Inlay Hints
Inlay hints display inline annotations:
- Attribute types: Shows
: Boolean,: String, etc. after attribute values - Slot biscuits: Shows
slot: headerafter the closing tag of slotted elements
Disable inlay hints by setting cem.inlayHints to false in your editor settings.
Deprecated Elements and Attributes
Elements, attributes, and slots marked as deprecated in the manifest are reported with DiagnosticTag.Deprecated, rendering as strikethrough in supporting editors. If the manifest includes a deprecation reason, it appears in the diagnostic message.