While working on a Chrome Extension, I encountered a problem where an HTML subtree and CSS style sheet injected into the original page were being affected by the original CSS. Despite my attempts to override the styles, it seemed unfeasible to manually set every default attribute. Here is a snippet of the issue:
<!DOCTYPE html>
<style>
/* original CSS */
input[type="text"] {
background: green;
}
input[type="text"]:focus {
background: yellow;
}
/* my injected CSS somewhere else */
.injected-root input[type="text"] {
border: solid 1px navy;
}
</style>
<input type="text" value="original text">
<div class='injected-root'>
<input type="text" value="injected text">
</div>
The main challenge was ensuring that the injected HTML subtree remained unaffected by the original CSS present on the random pages from the internet. This led me to ponder:
- Is there a way to reset the style of a subtree completely?
or
- Any other strategy to make the subtree seem like it exists in an "isolated universe" only governed by its own injected CSS rules?