bug: Html attributes not exported in wrapper components

[verena-ifx]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.5.0

Current Behavior

When building my stencil library using vue and react output targets, Html attributes, like aria attributes, tabindex etc. do not get exported when they are part of some nested HTML elements inside the component, such as list items, or nested divs.
In a vanillajs example application, I get the following output:

<li class="tab-item active" tabindex="0" aria-selected="true" aria-disabled="false" role="tab">tab header 1</li>

Whereas in my Vue (as well as in React) application, I see the following:

<li class="tab-item active">tab header a</li>

I dont have any special settings in my build process, I use the default described in the framework integration documentation.
Any ideas how I can fix this?

Expected Behavior

I would expect the wrapper components to be rendered the same as when using the plain stencil components.

System Info

No response

Steps to Reproduce

• Create Stencil library with a component containing a list; set tabindex on the list items to make them focusable (component is a tab-navigation)
• Build library including vue/react output targets
• consume wrapper components from npm or via symlinks in an example application
• in browser console, check the html of the component

Code Reproduction URL

Infineon/infineon-design-system-stencil#741

Additional Information

No response

[rwaskiewicz]

Hey there 👋

Thanks for the issue report. I'm going to move this over to the Stencil DS Output Targets repo, as this is an issue with the output targets, rather than Stencil itself.

[verena-ifx]

any update on this?

[rwaskiewicz]

@verena-ifx

any update on this?

Not at this time, the team has not had the opportunity to look at the issue