Can I custom css of my web-component used inside another web-component?

Question

I'm using javascript and lit-element.

I've a web component called "my-list" that has inside some div with text, and another web component (called "my-table"), that is a table showing a list of items with different features. Inside "my-table" I've written some css and some functions that do some things with data inside the table (for ex: sorting).

What I want to do is to print the webpage related to "my-list" component, changing the layout of the table (for ex: reduce the padding, or delete the table border, or change the font-color, and similar stuffs).

I tried with @media print inside "my-list", for example with:

    static get styles () {
        return [      
          super.styles,
           css`
            @media print {    
              my-table {
                color: red;
              }
            }
          `
        ];
      }

Obviously, the font color of items in my-table doesn't change if I try to print the webpage.

Does it exist a way to change css of custm web component inside another web component?

I thought to 2 different solutions:

1. create another web component "myTable-printVersion" with the right css that I want for print, define it inside "my-list", set "visibility: hidden" if I don't print the page and "visibility: visible" inside @media print.

2. modify the css for print directly inside a @media print defined in "my-table". This is not my favorite solution because I use "my-table" component inside other components, and I dont' want the same print layout for each of these components. For example, I want different font color for each of these components when I print them. Red for "my-list", blue for "myOther-list".

Thanks for your help!

Answer 1

The elements inside your nested component <my-table> are inside the shadowRoot of the component, which creates an isolated DOM with scoped CSS that don't leak outside.

Inherited properties will be inherited as usual in shadowRoots too. And color is one. So your "color: red" will be applied to elements inside the shadowRoot of <my-table> if they are inheriting that value (which it will if no other is specified, since inherited properties like color will get the computed value of the parent)

But some other properties like "border" or "padding" don't inherit. To style them from the outside you can use the ::part() pseudo-element.

Inside your nested component <my-table>, you will expose the "part" that can be edited from the outside:

<div part="row">Table row content</div>

And within the scope of <my-table> you can use that pseudo-element:

my-table::part(row) {
  padding: 20px;
}

---

For styling based on outside context you can also use the :host-context() pseudo-class function. But, in your particular case, the element context isn't what is changing, its the device characteristics.