Why is my nested web component adding vertical space in Lit?

Question

I have a weird issue where when I add padding-left: 32px to an element, vertical space gets added. If the CSS says 0, and I add the space manually in Chrome debugger, the vertical space isn't there. This is only happening with nested components. I'm not sure if I'm misusing something or if I have found a bug.

I have code like this:

<cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
  >Not Nested A</cai-setting-row
><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
  >Not Nested B</cai-setting-row
>

<cai-setting-row-account></cai-setting-row-account>

The render of cai-setting-row-account is just the same markup:

render() {
  return html`<cai-setting-row
        class="itemGroupMiddle doubleIndent"
        data-type="A"
        >Nested A</cai-setting-row
      ><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
        >Nested B</cai-setting-row
      >`;
}

It renders like this:

The "Not Nested" elements look right. The "Nested" ones have extra space and you can see a weird border on top that is the distance of the padding.

I have a functioning sandbox here:

https://studio.webcomponents.dev/edit/8u0cg76BNEiSoHXQT8by/

Where are the styles defined? Is shadow DOM style encapsulation preventing some styles from reaching the nested elements? It would be helpful if there was a minimal runnable repro. — YouCodeThings, Nov 03 '22 at 18:51
Hey @YouCodeThings I posted this question and immediately started working on sandbox. Link now at end of question but also here: https://studio.webcomponents.dev/edit/8u0cg76BNEiSoHXQT8by/src/CaiSettingRow.ts?p=stories — Dave Stein, Nov 03 '22 at 18:53
Thank you! I think the issue is again `css\`:host{ display: block; }\``. In your repro the host web components are `display: inline`. See this fork of your preview where I've added `display: block` to the host styles: https://studio.webcomponents.dev/edit/OOFrv5Y8jfg7ha9jhLB7 So it's not hidden in the link, I changed the static styles to: `static styles = [settingRow, css\`:host{ display: block; }\`];` — YouCodeThings, Nov 03 '22 at 19:06
Doing so also adds a weird space to the left tho that I am also trying to figure out upon making this change — Dave Stein, Nov 03 '22 at 19:19
Ahhh it's my implementation of merging `class` from `` which makes the class get applied to `:host` and the element i intend. That was my mistake! — Dave Stein, Nov 03 '22 at 19:21

score 0 · Accepted Answer · answered Nov 03 '22 at 19:25

I misunderstood how class is used on a custom component. Doing <my-component class="foo"> adds foo to the :host. My code in sandbox needed to change the magic of const parentClass = this.getAttribute('class') ?? ''; to const parentClass = this.getAttribute('itemClass') ?? '';, such that I wouldn't accidentally be applying classes to the :host and the intended element.

Why is my nested web component adding vertical space in Lit?

1 Answers1