[Bug]:Challenges in Extending Web Components: CSS Dependency Issues

[sibyaugustine]

Package

@carbon/web-components

Browser

Chrome, Firefox, Safari, Edge

Package version

2.15.0

React version

No response

Description

Extending the web components is not applying CSS correctly. There is an option to extend the web components, but doing so does not render the components properly due to their dependency on Carbon styles. I checked the code, and it appears that some CSS styles depend on the component name. For example, with cds-button, giving it a new name does not apply its base CSS, as it is hardcoded with cds-button.

Reproduction/example

NA

Steps to reproduce

Use the following code , and it does not render the button correctly

import { css, customElement } from 'lit';
import CDSButton from '@carbon/web-components/es/components/button/button';

@customElement('my-button')
class MyButton extends CDSButton {
  // Custom CSS to enforce `field-02` (light) style of the dropdown
  static styles = css`
    ${CDSButton .styles}
    .cds--list-box {
      background-color: white;
    }
  `;
}

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems