Comments (11)
I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite
from core.
I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite
I don't understand what you mean. The current scenario is that when there is an imported component in defineCustomElement, the style of the imported component is not loaded. This should have nothing to do with unocss.
from core.
I provided a demo without introducing unocss
from core.
I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite
I don't understand what you mean. The current scenario is that when there is an imported component in defineCustomElement, the style of the imported component is not loaded. This should have nothing to do with unocss.
the unocss plugin will extract the class in the component template, In shadow-dom mode comA is registed by definedCustomElement api, so its class in template will be extract , but it sub com B will not
vite resolve comA(shadow-dom first) and its sub component rerecursively, but unocss plugin not
from core.
the unocss plugin will extract the class in the component template, In shadow-dom mode comA is registed by definedCustomElement api, so its class in template will be extract , but it sub com B will not
compB is extracted too , you can add break point to test
from core.
![截屏2024-06-27 21 28 15](https://private-user-images.githubusercontent.com/27677166/343794683-e06f25e3-7e5c-4f38-a23e-a2f2a9be5f79.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNTAwNzIsIm5iZiI6MTcyMzI0OTc3MiwicGF0aCI6Ii8yNzY3NzE2Ni8zNDM3OTQ2ODMtZTA2ZjI1ZTMtN2U1Yy00ZjM4LWEyM2UtYTJmMmE5YmU1Zjc5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEwVDAwMjkzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM0YWZhMDQ0NmM2NDMxYTg4NDU3ZjZiYTE4MGRmZmE0ODM3YzQxM2Y1NDVjZWQ0MjFkMzA5ODAzOThiYjlmNTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.D5rPqMfn8xN0r0Td22SpTSPOyuvSQiiBOeEpYABx3ck)
from core.
check my repo link without unocss,no style because vue api no support this case
from core.
check my repo link without unocss,no style because vue api no support this case
ok. I will do it tomorrow, good night!
from core.
check my repo link without unocss,no style because vue api no support this case
ok. I will do it tomorrow, good night!
Hello, have you confirmed this question? Will there be a schedule
from core.
When Vue's custom elements were first designed, it was expected that every subcomponent under the custom element would be a custom element. This caused the problem that the styles of ordinary components under the custom element would not take effect. The relevant solution is still under further discussion. The current temporary solution is to follow the rules of Vue, that is, every subcomponent is a custom element.
from core.
Vue 的自定义元素在设计时,就期望自定义元素每个子组件都是一个自定义元素,现在我们来看一下自定义元素组件的生效问题,目前解决方案还在进一步中,目前临时的解决方案是遵循 Vue 的规则,即每个子组件都是一个自定义元素。
Okay, until there is a further solution, I will use the one provided by unocss: import the styles of each subcomponent into the root component.
But as a user, let me share my thoughts.
Because many businesses are not just single components, we have chosen to use Vue3 to develop components. Apart from defining the root element as a custom element and providing it externally, all internal operations should be consistent with the logic of ordinary elements, which will make development very comfortable.
If all subcomponents must be custom elements, then each layer needs to handle event listening and prop types, which would be very uncomfortable. Moreover, it is not possible to only introduce style files in the root component like regular components. I need to separate my overall style files one by one and import them in their respective custom elements, or simply not split them, and import each custom element, which feels very elegant.
So in summary, I believe that even if considering other scenarios, it is important not to go against the original intention. The reason why I chose Vue to develop custom elements was because of its convenience, but now it makes me feel very uncomfortable
from core.
Related Issues (20)
- provide & inject is not work in one of defineComponent signature `DefineSetupFnComponent ` HOT 1
- [@vue/compiler-sfc] Failed to resolve index type into finite keys HOT 4
- [vite] Internal server error: Maximum call stack size exceeded HOT 3
- Teleport 怎么样动态插入到定义的to的类里面 HOT 2
- Build error on Windows
- Scoped slot problem - 作用域插槽问题 HOT 5
- cannot set parent VNode using createVNode api HOT 3
- Setup script generic type problem HOT 4
- KeepAlive 缓存中组件在卸载时没有自动清理 'effect' (Components in KeepAlive cache did not automatically clear 'effect' during uninstallation) HOT 3
- cannot call Set#intersection for set with Proxy HOT 3
- throw TypeError when using Teleport HOT 7
- 3.4.32 v-html prints undefined
- <Teleport> content not be removed on onDeactivated & not re-insert on onActivated HOT 2
- `defineModel` does not trigger update for nested values HOT 4
- The dead loop of Vue SFC Playground HOT 1
- v-for中的ref问题 HOT 2
- The Chinese official website of vue3 is having problems opening in some areas HOT 1
- When the number of unresolved async component caches exceeds `max` set to KeepAlive, nothing is rendered HOT 4
- v-model value is not updated correctly, when changing the value multiple times in the child component HOT 2
- Vue crashes when function name is similar to imported component HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.