WebReflection / uce-template

A Vue 3 inspired Custom Elements toolless alternative.
https://medium.com/@WebReflection/a-new-web-components-wonder-f9e042785a91
ISC License
108 stars 7 forks source link

Instance children are not being removed #3

Closed dy closed 3 years ago

dy commented 3 years ago
<x-x>2</x-x>
<template is="uce-template">
  <x-x></x-x>
</template>

This does not clear up 2.

WebReflection commented 3 years ago

This is expected behavior. You can either use slots or define an export that will populate the custom element as you want.

It's the first example in the related blog post: https://webreflection.medium.com/a-new-web-components-wonder-f9e042785a91#3214

The reason for this is have components defined only at the style level, or only at the listeners level, without caring about replacing or re-hydrating their SSR content.

In few words, there is no use-case for cleanup empty components, and if you need a cleanup, just put anything in it, including a comment, to explicitly hydrate the component with emptyness once live (again, no use case for this, use a style display none instead and you're done).

WebReflection commented 3 years ago

The benefit is that you can have standalone components with scoped styles in files a part, and load these at runtime instead of shipping their CSS a part. Style only components can also have listeners without needing to hydrate what's already in the page. An empty component is instead useless if all it does it erase its content, you can always querySelectorAll components and make them empty, but again, it's pointless, no use-case, while having empty descriptors to signal these should not touch the content, re-hydrate, or render, over what's in there already, is a win. There are already projects based on this approach and it works. Once you'll use this library at its full potential for real-world use cases maybe you'll better get the idea behind standalone components. See Life Diary project, as example, and its public folder. https://github.com/WebReflection/life-diary/tree/main/public/comp

On Fri, Oct 30, 2020 at 11:24 AM Dmitry IV. notifications@github.com wrote:

Just curious - what's the practical reasoning for style-only components, what's the benefit creating a custom element over adding a class?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/WebReflection/uce-template/issues/3#issuecomment-719470388, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAU55IDFSVKIHGM6N53BKLSNKH5XANCNFSM4TELCEZA .