3 ms·
This is the example from the article, and pretty common practice for web components. As far as an IDE is concerned this is just a string of text (it doesn't kno
by itslennysfault 3y ago
This is the example from the article, and pretty common practice for web components. As far as an IDE is concerned this is just a string of text (it doesn't know/care that it is html). This makes it more error prone as the IDE can't catch syntax errors in the html.
connectedCallback() {
this.shadow.innerHTML = `
<p>Hello from a web component!</p>
<style>
p {
color: pink;
font-weight: bold;
padding: 1rem;
border: 4px solid pink;
}
</style>
`;
}
- paulddraper 3y agoWell, you can use `innerHTML` and a string, but you don't have to. But there several alternatives: 1. Use DOM APIs (createElement). 2. Fetch the HTML as a separate resource. 3. Have the HTML in a separate file and bundle it with a bundler. 4. Use React/JSX. 5. Use a preferred templating library of your choice. You can do whichever of these you like the most