naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

可以使组件支持运行在 Web Components 里么

Open Zhang-Wei-666 opened this issue 2 years ago • 3 comments

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 的时候, 可以放一份到组件内

Zhang-Wei-666 avatar Aug 16 '22 01:08 Zhang-Wei-666

给一个样式挂载位置的钩子?用户自己传?

07akioni avatar Aug 16 '22 16:08 07akioni

让用户手动挪确实不太优雅

07akioni avatar Aug 16 '22 16:08 07akioni

这样怎么样

import { useStyles } from 'naive-ui';

// 所有插入到 `head` 内的 `style` 样式表引用, 每插入一个新的样式表, `styles` 也会更新
const styles = useStyles() as Ref<HTMLStyleElement[]>;

想了下, 大家对于样式的插入位置及处理可能都不一样, 干脆样式挂载的部分就交给开发者自己就好了, 反正处理一次以后也不用管了

Zhang-Wei-666 avatar Aug 17 '22 02:08 Zhang-Wei-666

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

jahnli avatar Mar 12 '24 13:03 jahnli