When developing web applications with vanilla js and web components, it is often required to select elements from an imported template with querySelector.
This extension provides autocompletion for selectors and a code action to define corresponding class properties.
If a html document is imported via ES6 imports, typing querySelector in js/ts documents triggers autocompletion of possible css selectors.
Import the document for example as:
import * as template from "./template.html";Currently supported completion suggestions:
- id attributes
- data-* attributes
When generating a missing class property, for a querySelector, the type of the property is generated as any. This extension infers the type correctly using the css selector and the imported html template.
As above the document needs to be imported:
import template from "./template.html";