A problem I faced recently with web components using shadow dom is styling nested components within custom element: From <user-avatar> we can give styles to <i

A problem I faced recently with web components using shadow dom is styling nested components within custom element: From <user-avatar> we can give styles to <img> <user-avatar> <img src="https://example.com/path/to/img.jpg https://example.com/path/to/img.jpg" alt="..." /> </user-avatar> but not anymore when its below <picture> <user-avatar> <picture> <img src="https://example.com/path/to/img.jpg https://example.com/path/to/img.jpg" alt="..." /> </picture> </user-avatar>