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.
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.
