1

After the announcement yesterday of Salesforce open sourcing LWC, I've created a new project with the new npx tool on lwc.dev.

I have also added the SLDS css folder, and can view the styled components fine in the top level html file, but none of the child components get styled.

Is there another step that needs to be taken?

I understand that components should be styled individually, however duplicating common styles seems to mean writing css multiple times.

2

based on the html source it seems that the Standalone LWCs are using the real shadow dom instead of salesforce semantic one. That means it follows the normal Web Component Specification which means all styles are completely encapsulated.

Normally you are in theory able to add a link tag pointing to the stylesheet inside the template which seems to be prevented by the LWC Compiler. For now it seems to be possible to do it via Javascript but i am not sure if Salesforce will remove that Ability too.

Example:

    constructor() {

        super();
        const styles = document.createElement('link');
        styles.href = '/resources/css/main.css';
        styles.rel = 'stylesheet';
        this.template.appendChild(styles);
    }

Potentially all used Stylesheets should be also included in the main index.html as this approach would load the respective stylesheet after the dom element was already inserted.

  • Nice answer. It works, although time will tell if it keeps working. – Paul Taylor May 30 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.