Code Completion not working with custom elements - Vanilla JS
I have a custom element call <mrp-button>. It has several functions, but they don't show up in the code completion. I do understand that this may not be a feature, just thought I would ask.
const Temp_template= document.createElement('template');
Temp_template.innerHTML = `
<mrp-button primary id="addButton">Add</mrp-button>
`
constructor() {
super();
this.attachShadow({mode:'open'});
this.shadowRoot.appendChild(Playlist_template.content.cloneNode(true));
this.addButton= this.shadowRoot.querySelector('#addButton');
}constructor() {
super();
this.attachShadow({mode:'open'});
this.shadowRoot.appendChild(Playlist_template.content.cloneNode(true));
this.addButton= this.shadowRoot.querySelector('#addButton');
}
The custom element has several functions, for example .hide();, but I cannot access them (shown below).
Proof the hide function exists and and can be accessed here:
Please sign in to leave a comment.
hard to tell without the full code snippet, but I suppose that the problem is that
querySelectoronly returnsElement, andElementdoes not have your custom element properties/event handlers; you have to somehow cast theElementto your custom element type to let thee IDE know actual type of your element. In vanilla JS this has to be done with JSDoc annotations (/** @type {YourCustomElement}*/)Hey thanks for the help, but that's way too much extra work. Note sure if this is related or not but I found a similar problem with custom elements. I ran the project using the built in web-storm tools (right click -> debug) and it works pretty good, except the code completion is still not working even with live code. The image on the left is the webstorm as described above. The image on the right is how I would run a node program without WebStorm (command line, open a browser, navigate to local....).
If you look in the red circles, you will see that the show() is not showing up in the webstrom IDE, but does show up in chrome.
Here is the repo you can use: https://github.com/pavlism/karaoke
Simple node project, download, use "node app.js" to run. Click the first button to get the debugger in the images.
Completion in console/watches is the same as in editor - it uses JavaScript code static analysis data