怎样注入一个 DOM 元素，不受继承的 CSS 的影响 ?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 2695 天前的主题，其中的信息可能已经有所发展或是发生改变。

我正在做一个翻译单词的浏览器扩展，需要在任意网站上注入一个翻译窗口，要防止当前网站的 CSS 影响翻译窗口的外观，所以提出这个问题。

还有两个方案，都不理想

1 插入一个 iframe，不会受到当前网站 CSS 的影响

2 插入一个自定义元素 <foo></foo>

CSS

插入

foo

翻译

23 条回复 2018-05-29 23:40:43 +08:00

fe619742721

2018-05-29 11:30:47 +08:00

important 不行么

xiaody

2018-05-29 11:33:06 +08:00

iframe 和自定义元素哪里不理想？
CSS 方案可以试试 https://www.w3.org/TR/css-cascade-3/#all-shorthand

yushiro

2018-05-29 11:37:40 +08:00 via iPhone

内联样式的优先级最高，自己先覆盖一遍呗

cccer

2018-05-29 11:40:24 +08:00

可以参考“划词翻译”这个插件，全部使用自定义元素。
https://chrome.google.com/webstore/detail/%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/ikhdkkncnoglghljlkmcimlnlhkeamad

wwjvtwoex

2018-05-29 11:42:32 +08:00

@xiaody 这两个方案还没试过，目前想到的有：

1 iframe 涉及窗口间传递参数

2 自定义元素实现 <select> 之类的比较麻烦

banricho

2018-05-29 11:48:15 +08:00

把元素插到 </html> 后面，虽然不符合规范，但是浏览器基本都能识别

wwjvtwoex

2018-05-29 11:48:32 +08:00

@yushiro 问题是想偷个懒，不想全部覆盖，而且谁知道什么奇怪的网站改了一些非常规的值

wwjvtwoex

2018-05-29 11:55:17 +08:00

@banricho 刚试过，不行 Firefox/Chrome

doubleflower

2018-05-29 12:11:50 +08:00

以前扫了一遍 web components 相关时记得好象有这么个技术，好象叫 Shadow DOM，chrome 原生支持的

leega0

2018-05-29 12:19:16 +08:00

楼上给了你答案

wwjvtwoex

2018-05-29 12:19:22 +08:00

@xiaody 感谢，似乎 style="all:initial" 能用

milklee

2018-05-29 13:32:20 +08:00 &nbp;

之前我也为这个问题纠结了很久，还为此写过一篇文章 https://github.com/lmk123/blog/issues/32

我尝试过挨个重置 css 样式、Shadow DOM、全自定义元素、iframe 这四种方式，最后还是觉得 all 最好。

milklee

2018-05-29 13:41:40 +08:00

@banricho @wwjvtwoex 可以把元素插入到 </head> 和 <body> 之间，这样浏览器是可以识别的

banricho

2018-05-29 13:44:54 +08:00

@milklee #13 我的锅，</body> 之后也行
刚才没考虑清楚，这样其实只能避免从父级继承，但对于直接定义标签还是没办法...
确实 all 更好，学习了

wwjvtwoex

2018-05-29 14:23:58 +08:00

@milklee 但使用 “ all ”，注入元素只有外观不受影响，依然不能避免 js 事件处理的影响，最终还得用自定义元素。

banricho

2018-05-29 14:25:34 +08:00

@wwjvtwoex #15 JS 事件处理的意思是？

wwjvtwoex

2018-05-29 14:32:30 +08:00

@banricho 宿主页面可能对你的 click 事件有其他的处理方法

banricho

2018-05-29 14:43:17 +08:00

@wwjvtwoex #17 这种可以阻止冒泡解决吧。。。

wwjvtwoex

2018-05-29 14:58:32 +08:00

我没仔细考虑，对注入的元素，“阻止冒泡” 确实可以解决。

mg122

2018-05-29 15:32:26 +08:00

z-index 层和透明度

chenyu8674

2018-05-29 15:39:37 +08:00

用 canvas 画一个 [doge]

gxm44

2018-05-29 15:52:47 +08:00

shadow dom

codehz

2018-05-29 23:40:43 +08:00

把源站放 iframe 里（