naive-ui
naive-ui copied to clipboard
可以使组件支持运行在 Web Components 里么
This function solves the problem (这个功能解决的问题)
公司的远古级项目, 重写代价太大了, 只好封装成 Web Components 再使用
研究了下, 主要是样式挂载的位置有区别, 有点差异的组件类似于 Popover 这种就比较麻烦
我现在的解决方案是在组件内定义一个 <n-config-provider cls-prefix="xxx"></n-config-provider>
, 然后实时扫描 head
内的 style[cssr-id^="xxx-"]
, 将相关的样式克隆到 Web Components 组件内, 运行是没问题, 但是感觉不太优雅, 看能不能有个官方的解决方案
Expected API (期望的 API)
提供一个钩子? 使生成 style 的时候, 可以放一份到组件内
给一个样式挂载位置的钩子?用户自己传?
让用户手动挪确实不太优雅
这样怎么样
import { useStyles } from 'naive-ui';
// 所有插入到 `head` 内的 `style` 样式表引用, 每插入一个新的样式表, `styles` 也会更新
const styles = useStyles() as Ref<HTMLStyleElement[]>;
想了下, 大家对于样式的插入位置及处理可能都不一样, 干脆样式挂载的部分就交给开发者自己就好了, 反正处理一次以后也不用管了
This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem