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

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

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

export class MyComponent {

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

The ponent is included like this:

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='/[email protected]/dist/myponent.js'></script>
<my-ponent></my-ponent>

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 ponent. Is this possible?

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

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

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

export class MyComponent {

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

The ponent is included like this:

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

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 ponent. Is this possible?

• javascript
• stenciljs

3 Answers 3

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

index.html

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

my-ponent.css

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

In the ponent'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.

Your ponent has a "Shadow DOM", which serves the purpose of encapsulating everything, including styles in a separate DOM, so it pretty much exists to prevent you from overriding it's styles.

Previously there were some "shadow piercing" CSS directives like /deep/ and ::shadow, but they have been deprecated and are no longer functional.

So that's pretty much how it's supposed to be.

Now for workarounds:

• create a shared css file and include it in both your ponent and your application - or
• set the style using javascript from your host application using the shadowRoot property:

var div = document.querySelector('#p').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';

You should be able to use the :host psuedo selector in your stylesheet to apply host level styles:

:host {
    style: value
}

You could easily bring in @stencil.sass for your style sheets, link here: https://github./ionic-team/stencil-sass/blob/master/readme.md

This will give you greater functionality with your styles in stencil.

EDIT:

I misunderstood and now see you want to manipulate outside of the ponent. You could supply a <slot /> element in your web ponent and add specifically styled elements from outside of the web ponents DOM. Link here: https://developer.mozilla/en-US/docs/Web/HTML/Element/slot