html - 有没有一种轻松的方法来制作 "css sandbox"？

Question

我所说的 CSS 沙箱是指我的布局中具有完全独立外观的部分。我需要这个，因为我的一些类需要在布局中输出一些内容的“窗口”，但我不希望应用程序的 css 弄乱它们。它们主要与调试相关，例如打印 var 内容、基准图表或显示一些错误/异常。

到目前为止，我一直在进行某种本地重置，但是为了避免碰撞，这真的很烦人，如果我忘记了一些规则，可能会失败。例如:

html body div.eh-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    vertical-align: baseline !important;
    background-color: #fff !important;
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 20px !important;
}

html body div.eh-box * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    color: #333 !important;
}

html body div.eh-box .title {
    font-size: 50px !important;
    line-height: 75px !important;
    /*font-weight: bold !important;*/
}

html body div.eh-box .desc {
    font-size: 24px !important;
    line-height: 36px !important;
}

Answer 1

我不太了解，但我认为这或多或少是什么 Shadow DOM做