fix(material-experimental/mdc-list): avoid style conflicts with other list-based components

[crisbeto]

Currently the styles for the MDC-based list are included globally which causes conflicts with other list-based components like mat-select and mat-autocomplete. This can be seen by going to the MDC list demo and then the MDC select demo, and observing that the option text is now truncated.

These changes resolve the issue by nesting the styles under the mat-mdc-list-base class.

[devversion]

Is there a better way we can avoid style conflicts? I think this makes it a bit inconvenient in terms of instantiating the MDCList foundation, and declaring the adapter. I'm not sure if this currently has any a11y impact.

components/src/material-experimental/mdc-list/interactive-list-base.ts

Line 160 in ddbfe11

export function getInteractiveListAdapter(

[crisbeto]

Agreed that this isn't great, but the alternative would be to fix it in the select, autocomplete and menu specifically, but then it could still conflict with other list-based components in the future or other non-Material components the user might have on the page.

[mmalerba]

We should probably change the adapter to apply any classes, attributes, etc to the div. The only other way I can think to do this is if MDC changed their mixins to allow us to add to the root selector:

@mixin deprecated-without-ripple(..., $root: '') {
  #{$root}.mdc-deprecated-list {
    ...
  }
}

[devversion]

@mmalerba Yeah, I thought that too, but then realized that this could break a11y because the MDCList "root" usually receives the aria- attributes from the foundation. Personally I'd prefer what you showed. We might be able to convince MDC to support this because list is commonly used in various other components too, and it makes style isolation easier.

[crisbeto]

Closing this since the concerns are valid and landing it will be tricky. I'll fix the issues in the specific components instead.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}