I came across a requirement where I wanted to change the width of the Date & Time pickers of the


LWC component from component library. It took some time for me to figure out I might not be able to set the styles of items within an LWC component because of the Shadow DOM restrictions.

Is there any easy way to fix this?

1 Answer 1


According to DOM Access Containment it is supposed to behave like that. There is nothing to fix there.

I would suggest to use 2 inputs for your use-case and restrict widths on them.

Sample code:


        <lightning-input class="data-input" type="date" name="input1" label="date"></lightning-input>
        <lightning-input class="time-input" type="time" name="input1" label="time"></lightning-input>


.data-input {
    width: 5rem;
    display: inline-block;
.time-input {
    width: 10rem;
    display: inline-block;


enter image description here

  • Perfect! Thanks for your help.
    – Anee
    Aug 27, 2019 at 4:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .