StencilJS | Apply host styles to component

Question

I am trying to apply the styles from the website where a stencilJS component is included ... but don't know how.

import { Component } from '@stencil/core';

@Component({
  tag: 'menu-component',
  styleUrl: 'menu-component.css',
  shadow: true
})

export class MyComponent {

 render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p id="red">This is JSX!</p>
      </div>
    );
  }
}

The component is included like this:

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script>
<my-component></my-component>

In my main.css file I have something like this:

#red{
    color: red;
}

I would like the style to be applied to the element from the stencil component. Is this possible?

Answer 1

You can use css variables for this. Look at the following code samples:

index.html

<my-component style="--text-color:red;"></my-component>

my-component.css

#red {
    color: var(--text-color, black);
}

In the component's styling you assign a CSS variable as value to the text color of the class [id="red"]. In your application, you're now able to change the color by setting the value of the variable.