For a very mysterious reason, I have to limit the scope of a css file only to an element:
<html>
<head>
<link rel="stylesheet" type="text/css" href="one.css">
</head>
<body>
<div id="first-container">
</div>
<div id="second-container">
<link rel="stylesheet" type="text/css" href="two.css">
</div>
</body>
</html>
The rules in one.css should be applied as usual, while the rules in two.css should be scoped to the div#second-container only.
That is exactly what the attribute scoped attribute should do: .html#style.attrs.scoped , but is not currently supported (and it will never be) .
I've tried to isolate scope with a regex (CSS are 10K+ lines minified), but it didn't work out well.
Any solution (or dirty workaround) for a strange use case like this?
I can use one of these way:
- one shot solution: some
sedmagic ontwo.csswhich prepends everything withdiv#sed-container - server side solution: some magic with php
- client side solution: some magic with js, without making extra sever call (i.e.: AJAX)
For a very mysterious reason, I have to limit the scope of a css file only to an element:
<html>
<head>
<link rel="stylesheet" type="text/css" href="one.css">
</head>
<body>
<div id="first-container">
</div>
<div id="second-container">
<link rel="stylesheet" type="text/css" href="two.css">
</div>
</body>
</html>
The rules in one.css should be applied as usual, while the rules in two.css should be scoped to the div#second-container only.
That is exactly what the attribute scoped attribute should do: http://w3c.github.io/html-reference/style.html#style.attrs.scoped , but is not currently supported (and it will never be) http://caniuse./#search=scoped .
I've tried to isolate scope with a regex (CSS are 10K+ lines minified), but it didn't work out well.
Any solution (or dirty workaround) for a strange use case like this?
I can use one of these way:
- one shot solution: some
sedmagic ontwo.csswhich prepends everything withdiv#sed-container - server side solution: some magic with php
- client side solution: some magic with js, without making extra sever call (i.e.: AJAX)
- have u seen this library arleym./scopedcss/static/jquery.scoped.js and demo page of its implementation arleym./scopedcss/static/index2.html – Arpit Srivastava Commented Jul 26, 2016 at 15:53
- I cannot use AJAX :( – marka.thore Commented Jul 26, 2016 at 15:55
4 Answers
Reset to default 3Use Sass and Nesting
// .scss
#second-container {
@import 'two';
}
It might be a little plicated but this es to my mind:
1) Create invisible iframe element anc copy content of div to it
var i = document.createElement('iframe');
i.style.display = 'none';
i.src = "data:text/html;charset=utf-8," + document.querySelector('#secondDiv').innerHTML;
document.body.appendChild(i);
2) Apply style in iframe
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe'].document.body.appendChild(cssLink);
3) Inline style of html in iframe.
4) Copy it back to div from iframe.
try this: add an extra id to the element, and make the isolated css to style that element using that extra id, in case the styling does not take effect, try adding !important to that particular line in your isolated css. e.g : height:0px !important;
You can do this with a Shadow-Dom aswell:
const ponent = document.querySelector('#ponent');
const host = document.querySelector('#host');
const shadow = host.attachShadow({'mode': 'closed'});
shadow.appendChild(ponent);#ponent {
display: none;
}<link rel='stylesheet' href='https://stackpath.bootstrapcdn./twitter-bootstrap/2.0.4/css/bootstrap-bined.min.css' />
<div id="ponent">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css'/>
<button class='btn btn-primary'>I get bootstrap 4 css