1

I have a a LWC component displaying within a Aura Component. The LWC is the "Create Jira Ticket" button, and the Aura Component contains all 4 of these buttons: enter image description here

I would like the "Create Jira Ticket" button width to match the "Take Ownership" button width, so it looks like this:

enter image description here

When editing the css file, the changes I make apply to the outer "lightning-button" element, but not to the "button" child element. I need to apply css to the child element in order to make the width match for the buttons. Below is the HTML I get from the dev console when loading the page.

<lightning-button c-generatejiraticketcase_generatejiraticketcase="" class="fixed-button-width slds-button">
  <button name="createJiraTicket" type="submit" class="slds-button slds-button_neutral" style="
   min-width: 150px;">Create Jira Ticket</button>
</lightning-button>

I tried overwriting the classes slds-button and slds-button_neutral but that didn't work, I'm guessing because those are lightning classes. I also tried using a child selector in the css file like this: lightning-button > button, but that didn't work.

css:

.fixed-button-width {
    min-width: 150px;
    background-color: black;
}

html:

<template>
    <lightning-button
                      class={buttonClass} <!--Sets class to: fixed-button-width slds-button-->
                      type="submit"
                      disabled={disable}
                      name="createJiraTicket"
                      label="Create Jira Ticket"
                      onclick={onCreateTicket}>
    </lightning-button>

    <lightning-spinner class={showHideSpinner} size="small">
    </lightning-spinner>
</template>

Does anyone know how I could access the child button element? I've tried using child selectors but couldn't get that to work

0

2 Answers 2

0

Well, you can apply CSS to the child LWC directly from your parent AURA Component. Simply,

.THIS button{
width: 150px;
}

This should apply to the child LWC button too! Or you can change the lightning-button to

<button class="slds-button slds-button__brand fixed-width">Create a JIRA ticket></button>

And,

.fixed-width{
width: 150px !important;
}
5
  • It won't because of Shadow DOM. The edit won't work either since custom CSS doesn't apply to the content of the standard LWC.
    – Phil W
    Oct 21, 2020 at 20:25
  • 1
    @Sachin Hooda I think this works, just confirming and will mark it as the answer. Thanks for the help!
    – Tom
    Oct 21, 2020 at 20:28
  • @PhilW any idea why is this working? I have experienced this too, i thought shadow dom would restrict it, or does shadow dom restrict the css for custom classes only and not html elements? Jan 19, 2022 at 7:00
  • @sfdcfox can you give some insight on above? Jan 19, 2022 at 7:00
  • Looking back at this, I am thinking this is very weird "parent" markup - I believe that the lightning-button is specified as an empty element and that the apparently nested button is being "pushed out" to become a sibling of the lightning-button. This then means it is not a child of the latter, but rather just a piece of HTML in the parent, so gets styled by the included CSS in the example. This is simply poorly defined and confusing markup that has a different result to what you expect. You can test this theory by inspecting the generated DOM in your browser.
    – Phil W
    Jan 19, 2022 at 7:13
0

Standard LWC components that support "class" only support SLDS classes against their content. Any non-SLDS classes applied appear on their container element but typically have little or no effect other than to allow you to find elements by class name or to add exterior styling (around the outside of the component). This is due to the fact that all their "content" is actually rendered in a Shadow DOM and therefore isolated from any CSS applied within their parent.

If you want to do this sort of thing you should look to use explicit SLDS sizing, which is documented here. You may want to combine this with use of a grid in which to place the set of buttons.

UPDATE:

I haven't checked for myself, but I believe this markup is incorrectly structured - lightning-button does not support nested content. I suspect that because of this the button is automagically moved to be a sibling of the standard LWC component, and thus is actually part of the parent component's scope and can be styled directly as long as you understand that it doesn't have the lightning-button around it - it is one level higher in the DOM.

This theory fits with the solution suggested by the other answer.

You must log in to answer this question.

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