attributePassing breaks CSS because of ViewEncapsulation in Angular

[jonaskuske]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

Run npm run start in https://github.com/jonaskuske/dbux-attributepassing-repro.
Only the second button, where the CSS selector uses ::ng-deep, is affected by the display: none rule.

TL;DR:

@Component({
  template: `<db-button class="green-btn">Click me</db-button>`,
  styles: `.green-btn { /* rules have no effect */ }`
})
export class SomeComponent {}

Expected Behaviour

Both buttons are hidden due to display: none

Screenshots

No response

Browser version

None

Add any other context about the problem here.

Attribute Passing was contributed upstream in BuilderIO/mitosis#1665
It moves class, aria-* and data-* attributes from the host element <db-button> to the <db-button>'s child element <button>.

This is a rather breaking change due to ViewEncapsulation: component styles in Angular by default only affect elements that appear in that component's template, not other elements that are rendered somewhere down the tree. Moving attributes to elements that don't appear in a component's template therefore means component styles break.