同じCSSフレームワークの旧バージョンと新バージョンを共存させてい

Question

今作成しているWebアプリで
AdminLTEというCSSフレームワークを使用しています。
https://adminlte.io/themes/v3/index.html

このWEBアプリに新機能を追加するにあたり、
AdminLTEの新しいバージョンの機能を使用したいのですが
新しいバージョンのCSSを取り込んだ際に画面が崩れてしまいました。

HTMLのhead部分で以下のように指定しています。

<link rel="stylesheet" href="~/libs/admin-lte3/css/AdminLTE.min.css">　<!-- 新バージョン -->
<link rel="stylesheet" href="~/libs/admin-lte/css/AdminLTE.min.css">　<!-- 旧バージョン -->

この場合、新しいCSSの方が画面全体に適用されてしまい
画面が崩れてしまうのです。

<div id="demo1">
　・・・
　ここに旧バージョンのCSSを使用したい
　・・・
</div>

<div id="demo2">
　・・・
　ここは新バージョンのCSSを使用したい
　・・・
</div>

上記の例のように、画面の一部にだけ
新バージョンのCSSを適用して、
それ以外は旧バージョンのモノを使用したいのですが、
上手いやり方が思いつきません。

何かうまい方法があれば教えていただきたいです。

Comments

[Lhankor_Mhy]

Shadow DOM を使ってスタイルをカプセル化すれば、できないこともなさそうな？と思ったのですが、この方法が要件に合うのかよくわからなかったので、ここに書きます。
https://tech.basicinc.jp/articles/159

Answer 1

上記の例のように、画面の一部にだけ

新バージョンのCSSを適用して、

iframeで切り分ける以外に現在のところ簡単な方法はないと思います。
バージョンごとにスタイルの名称を完全に変える方針のフレームワークで無いのであれば、多くの要素で以前の記述を上書きすることになり、意図した表示にならないでしょう。

※「見た目」を同じにするなら、HTMLとCSSで同じ見た目になるように組めばできないことも無いでしょう。ただ、JavaScriptを含めたフレームワークの「動き」があるのであれば、それも独自に組む必要があるでしょう。

Answer 2

できなくはないです。

1, ローカル環境にRubyらへんでSassを入れてください。
2, 新バージョン（旧バージョンでも可能。使用箇所が少ない方）をローカルにダウンロードしてください。
3, 2でダウンロードしたファイルの拡張子を.scssに変更してください。
4, 以下のscss拡張子ファイルを作成してください。

.other-version-css {
  @import "/*ダウンロードし、拡張子を変更したscssを指定してください*/";
}

5, コンパイルしてください。（ここは、どうやってSassを入れたかによるのでご自分でお調べください。）

6, 以上の作業をすると、class名がother-version-css以下のclassは、他バージョンを適用することが可能です。

ただし、不具合が出る可能性は高いです。
が、一応共存させられます。