上一主题 下一主题
油猴中文网»论坛 › 技术交流 › 问答互助 › 脚本的样式冲突问题（样式隔离）
ScriptCat，新一代的脚本管理器脚本站，与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

脚本的样式冲突问题（样式隔离）

[复制链接]
  • TA的每日心情
    衰
    2024-5-20 12:38

    • 签到天数: 7 天

    [LV.3]偶尔看看II

    1

    主题

    4

    回帖

    12

    积分

    助理工程师

    积分
    12
    发表于 2023-4-14 00:05:13 | 显示全部楼层 | 阅读模式
    悬赏21油猫币已解决

    我写的脚本是关于给视频网站没有弹幕功能的播放器，添加本地弹幕功能和网络弹幕功能的。
    用的模板是自己魔改的模板 (https://github.com/KurosakiRei/webpack-userscript-template-with-vue3)
    用的组件是VuesticUI(https://vuestic.dev/)

    正常效果大概是这样的
    image.png

    写的时候其实就有发现有样式冲突问题，想说能不能用Vue写，因为写样式时可以带scoped属性实现样式隔离，但写完发现并不可以（因为开发时只给自己常用的几个网站做兼容）

    如果碰到没做过测试的网站，脚本的css和网站的css就互相冲突，大概是这样
    image.png

    所以想来请教一下，脚本的样式隔离要怎么做，求大神指点一二

    最佳答案

    steven026

    查看完整内容

    shadowRoot可以样式隔离 但是很多库都没做shadowRoot兼容，会使js也隔离了，导致组件无法被监听或者响应
    回复
    订阅

    使用道具 举报

  • TA的每日心情
    慵懒
    9 小时前

    • 签到天数: 812 天

    [LV.10]以坛为家III

    31

    主题

    552

    回帖

    1556

    积分

    荣誉开发者

    积分
    1556

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋
    发表于 2023-4-14 00:05:14 | 显示全部楼层
    shadowRoot可以样式隔离
    但是很多库都没做shadowRoot兼容，会使js也隔离了，导致组件无法被监听或者响应
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07

    • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5965

    回帖

    6763

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6763

    荣誉开发者喜迎中秋油中2周年生态建设者
    发表于 2023-4-14 02:21:42 | 显示全部楼层
    感觉可以尝试使用shadowRoot看看？（未测试）
    或者开个iframe？

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    衰
    2024-5-20 12:38

    • 签到天数: 7 天

    [LV.3]偶尔看看II

    1

    主题

    4

    回帖

    12

    积分

    助理工程师

    积分
    12
    发表于 2023-4-22 23:36:46 | 显示全部楼层
    李恒道 发表于 2023-4-14 02:21
    感觉可以尝试使用shadowRoot看看？（未测试）
    或者开个iframe？

    应该没人回帖了，shadowRoot看了下MDN，不是很懂（感觉脚本改起来应该很复杂，说不定会有楼下说的兼容性问题），我试试iframe吧，十分感谢
    回复

    使用道具 举报

  • TA的每日心情
    衰
    2024-5-20 12:38

    • 签到天数: 7 天

    [LV.3]偶尔看看II

    1

    主题

    4

    回帖

    12

    积分

    助理工程师

    积分
    12
    发表于 2023-4-22 23:37:57 | 显示全部楼层
    steven026 发表于 2023-4-14 00:05
    shadowRoot可以样式隔离
    但是很多库都没做shadowRoot兼容，会使js也隔离了，导致组件无法被监听或者响应 ...

    感谢回帖，我试试楼上说的iframe吧
    回复

    使用道具 举报

  • TA的每日心情
    衰
    2024-5-20 12:38

    • 签到天数: 7 天

    [LV.3]偶尔看看II

    1

    主题

    4

    回帖

    12

    积分

    助理工程师

    积分
    12
    发表于 2023-4-22 23:40:00 | 显示全部楼层
    好像最佳答案给错了，不好意思。。。。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07

    • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5965

    回帖

    6763

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6763

    荣誉开发者喜迎中秋油中2周年生态建设者
    发表于 2023-4-23 00:25:22 | 显示全部楼层
    KurosakiRei 发表于 2023-4-22 23:40
    好像最佳答案给错了，不好意思。。。。

    没关系，你知道一个魔咒吗
    我跟steven同时出现
    永远没人搭理我，跟steven聊
    我习惯了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    9 小时前

    • 签到天数: 812 天

    [LV.10]以坛为家III

    31

    主题

    552

    回帖

    1556

    积分

    荣誉开发者

    积分
    1556

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋
    发表于 2023-4-23 09:19:41 | 显示全部楼层
    李恒道 发表于 2023-4-23 00:25
    没关系，你知道一个魔咒吗
    我跟steven同时出现
    永远没人搭理我，跟steven聊

    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    笑死我了
    心疼哥哥1分钟
    回复

    使用道具 举报

    下一页 »
    返回列表 发新帖

    发表回复

    本版积分规则

    意见反馈

    yz@ggnb.top

    联系我们

    Archiver|手机版|小黑屋|网站地图| |Sitemap

    Copyright © 2020-至今 油猴中文网 版权所有 All Rights Reserved.

    快速回复 返回顶部 返回列表