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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4ODU2NDksIm5iZiI6MTcxOTg4NTM0OSwicGF0aCI6Ii8yNzY3NzE2Ni8zNDM3OTQ2ODMtZTA2ZjI1ZTMtN2U1Yy00ZjM4LWEyM2UtYTJmMmE5YmU1Zjc5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDAxNTU0OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM0YTkyZTU0NDc0YTE2MjczZDEyZjRjMDEwMWQ5ZDE1NWE5MGI3MDE5ZWM3NTdiYWNlOGE2YjRmZmQ1NmY1M2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.59ROZZhGihGT5ZcbQcedOUh43wxo8upPx-HBTvnyz70)
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)
- Optimization of computed value is not working any more HOT 1
- Conditional children inside an optional Teleport (with disabled) doesn't work
- In certain cases, the view fails to update properly HOT 4
- Computed value didn't update HOT 3
- Inconsistent isRef results HOT 2
- $slots not reactive outside template HOT 7
- Render error in `processFragment` when NODE_ENV=production HOT 1
- tsx中似乎无法使用defineModel HOT 2
- For the reactive of the collection, the results are inconsistent when assigning shallow and readonly during value fetching.
- 【memory leak】A memory leak occurred while I was using vue HOT 7
- Types of computed properties seem to be ignored, resulting in run-time errors instead of compile-time errors HOT 1
- 自定义指令,在setup script模式下面,在mounted钩子函数中调用当前指令所在实例的方法,提示该方法未定义(PS: 开发环境是可以正常调用) HOT 2
- CSS 中的 v-bind() 与 render一起使用 报错
- When in dev mode, modifying constants declared with const using v-model does not result in an error.
- [@vue/compiler-sfc] Unresolvable type: TSTypeAnnotation
- template字符串在线上无法渲染 HOT 1
- Memory leak in render function
- PropType with Interface with all optional properties leads to unknown type HOT 2
- v-bind in SSR with dev server fails to resolve imported objects
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.