Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Html attributes not exported in wrapper components #407

Open
3 tasks done
verena-ifx opened this issue Dec 11, 2023 · 4 comments
Open
3 tasks done

bug: Html attributes not exported in wrapper components #407

verena-ifx opened this issue Dec 11, 2023 · 4 comments
Labels
help wanted a good issue for the community package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package type: bug Something isn't working

Comments

@verena-ifx
Copy link

Prerequisites

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

@ionitron-bot ionitron-bot bot added the triage label Dec 11, 2023
@rwaskiewicz
Copy link
Member

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.

@rwaskiewicz rwaskiewicz transferred this issue from ionic-team/stencil Dec 12, 2023
@verena-ifx
Copy link
Author

any update on this?

@rwaskiewicz
Copy link
Member

@verena-ifx

any update on this?

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

@christian-bromann christian-bromann added type: bug Something isn't working package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package help wanted a good issue for the community and removed triage labels Oct 12, 2024
Copy link

ionitron-bot bot commented Oct 12, 2024

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted a good issue for the community package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package type: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants