search

trailheadapps / lwc-recipes

A collection of easy-to-digest code examples for Lightning Web Components on Salesforce Platform
https://developer.salesforce.com
Creative Commons Zero v1.0 Universal
2.59k stars 3.07k forks source link

Change Look and Feel for Standard LWC Component #207

Closed ashish-garg07 closed 4 years ago

ashish-garg07 commented 4 years ago

Summary

If we want to change in any look and feel of any Base Lightning Web Component then we can't make changes using CSS.

Steps To Reproduce:

  1. tag I want to show value to align right side.
  2. I apply custom CSS and try to make the change on slds-input CSS as well

Expected result

Text value within input should be align-right side.

Actual result

There is no change in look and feel.

Additional information

We can apply the outer part of LWC using CSS but if you want to change in look and feel of internal DOM then you can't do it.

pchittum commented 4 years ago

Hi @ashish-garg07 this seems like question related to the framework, not the sample app itself.

Basically, lwc prevents reaching into the DOM of the component from the outside (as you've encountered).

If you need a base component's functionality, but want to modify something about its internal implementation, I'd recommend looking into the OSS repo for base components. They are not all represented, but many of them are, and you might be able to get to what you need more easily than reimplementing from scratch.

ashish-garg07 commented 4 years ago

Hi @pchittum There is one more workaround I found and it's working that, We can use CSS file in static resource and write down CSS which will apply on internal dom of LWC basic component. I don't know its a best practice or not, but I hope that info will be useful.

muenzpraeger commented 4 years ago

Please be aware @ashish-garg07 that the internal DOM structure of a base component can change anytime.

ashish-garg07 commented 4 years ago

@muenzpraeger So whenever the DOM Structure is going to change, there will be pre-notification for that?

muenzpraeger commented 4 years ago

No, as the internals of a base component are an implementation detail. At some point in the future you may be able to customize the CSS of a base component using CSS variables, but that's somewhat out.

ashish-garg07 commented 4 years ago

Yes as I know Salesforce is working on it to apply CSS on base component externally. So the developer can change the look and feel of the base component. But when they are going to release don't have information for that.