Declaratively update the
<head>from a Stencil app.
This is a Stencil component meant to be used within Stencil apps to declaratively update the document <head>. You pass it elements that you'd normally place in <head>, and it updates <head> accordingly. Each instance will override duplicate tags from preceding instances.
Note that, because it uses virtual DOM as input, stencil-helmet can only be used within Stencil apps and not as a standalone web component.
npm install @stencil/helmet
import Helmet from '@stencil/helmet';
//...
export class MyComponent {
render() {
return (
<div>
<Helmet>
<title>{this.title}</title>
<meta name="description" content={this.description}/>
<link rel="stylesheet" href="/styles.css"/>
</Helmet>
</div>
);
}
}