-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
feat(runtime-dom): defineCustomElement without shadowDom (#4314) #4404
Conversation
There is a current limitation when not using Shadow DOM : using slot inside web components is not working : <my-comp>
<div>Some content</div>
</my-comp> The However, it should be possible to implement slot without shadow DOM inside Vue. Stencil seems to already support this : https://stackoverflow.com/questions/48726904/is-there-a-way-workaround-to-have-the-slot-principle-in-hyperhtml-without-using |
I implemented slot without shadow DOM on the same principle as https://github.com/vuejs/vue-web-component-wrapper/ (creating a VNode with I'm using a local copy of Let me know if you want me to add the slot implementation without shadow DOM to this PR. Thanks! |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
5822d18
to
a446bfa
Compare
Any chance this will get officially supported? |
Hoping to see this move along! One thing to be mindful of with this option, is how fallthrough attributes behave. For example, currently, |
@gnuletik Am I correct in that this PR does not support named slots? If your local |
@chasegiunta You're right, this PR does not support named slots. I don't have remaining local changes that are not part of this PR. Feel free to create a fork from my own to add support for it :) |
@gnuletik I've added named slot support locally. Getting fallthrough attributes to work for single root elements can be included next to button up this feature, but curious if it's even worth pursuing @LinusBorg @yyx990803 ? Is this the right direction? |
@gnuletik I've PR'd support for named slots into this branch. As for fallthrough attributes onto single root element components, or for slots without parent elements, I've worked out my own solution wrapping the contents in an element with |
I needed this functionality now so I implemented the PR locally as described here: However, my Vue project is not using TypeScript, so I used an online TypeScript to JavaScript converter. My Vue project built fine, via Vue CLI, but I got an error in the browser:
To resolve it, I had to add a line of code to the converted JavaScript.
|
Hi all - are there any specific blockers to moving forward with incorporating this change (aside from resolving the branch conflicts?) I notice this PR hasn't received any updates since last year and was wondering if there's anything I can do to help it along? |
@retail-robot we are waiting for maintainers feedback. |
There is an error when trying to build this
Does something need to be done to fix the html-parsed-element dependency? |
Any update on this? any chance we will see this in official package? |
Are you aware of #7942 and https://github.com/baiwusanyu-c/unplugin-vue-ce? |
This comment was marked as outdated.
This comment was marked as outdated.
Size ReportBundles
Usages
|
Not sure if it has broader impacts, but at least it fixes the current failing e2e tests
`html-parsed-element` schedules `parsedCallback` in rAF, so we have to wait for at least an animation frame (`nextTick` is not enough) to ensure the element is fully initialized. https://github.com/WebReflection/html-parsed-element/blob/11081fc102e2eec745a1a1d32723eef342df2452/index.js#L34
@LinusBorg @sxzz @yyx990803 any chance someone from Vue core team can look at this PR? We need a way to create web components that allows an end-user to be able to customize the style of the component. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd love to see this feature in Vue.js core.
However, for this PR to move forward, here are some improvements that need to be made:
- I've copied the
html-parsed-element
package's source code into the repository to fix some build issues. But as an IIFE, it cannot be tree-shaken, leading to an increase in bundle sizes. It's crucial that this code is refactored to be tree-shakable, ensuring that only users ofdefineCustomElement
experience the bundle size increase. - (In my opinion) Introducing an additional argument to
defineCustomComponent
seems aesthetically inconsistent. Personally, I would prefer a top-level component option alongside thestyles
option. - (Possible caveats?) If this implementation is accepted and merged, we will need a companion PR to the
docs
repository to- Document this new option
- Explain the special
parsedCallback
trick, which only executes in arequestAnimationFrame
callback. This behavior might catch some users by surprise. While most asynchronous operations in Vue.js occur innextTick
, this specific one operates innextFrame
.
The latest version of https://www.npmjs.com/package/vue-web-component-wrapper can now generate vue web component |
This PR add an optional parameter to
defineCustomElement
to disable shadow DOM on mount.This is a first draft, let me know if that sounds good to you and I can add more tests / docs if needed.
Thanks :)
Fixes #4314