How to apply some simple styles to tds of "datatable" of lightning web component in playground?

Question

Working in playground of lightning web components. I have following files and code:

basic.html

<template>
<div style="height: 300px;">
    <lightning-datatable
            key-field="id"
            data={data}
            columns={columns}>
    </lightning-datatable>
</div>    
</template>

basic.css

 td{
    background: red;
 }
 :host td{
    background: red;
   }

basic.js

import { LightningElement, track } from 'lwc';
import fetchDataHelper from './fetchDataHelper';

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];

    export default class BasicDatatable extends LightningElement {
    @track data = [];
    @track columns = columns;

    async connectedCallback() {
        const data = await fetchDataHelper({ amountOfRecords: 100 });
        this.data = data;
    }
    }

When I look into developer tools > inspect it renders styles in a style tag and do not apply to the element:

<style type="text/css">
    td[c-basic_basic]{background: red;}
    [c-basic_basic-host] td[c-basic_basic]{background: red;}
 </style>

Link to the play ground I am working on

Gifu

Please provide a working example. The link you give is not accessible here. Idk why. – Styliform

Answer 1

Have a look at the link to the playground i have made

https://developer.salesforce.com/docs/component-library/tools/playground/S6hzg24v4/116/edit

Inspired from https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/

Immoralist

Can you add your own css class and apply it on the datatable? – Chlorinate

Answer 2

You can also read up on using loadStyle. Since these are web components, the styles are scoped to that component only (basic component in this case). Using loadStyle will allow you to add some global styling rules.

Perverted