问题描述
我有一些 HTML 页面内容，我不想向用户展示，因为它是实验性的。我试图将内容包装成一个 div
<div class="experimental">MYCONTENT</div>
与风格
.experimental {
display: none
}
问题在于实验 div 中的不同样式。一些元素需要 flex，一些网格等。所以当我想取消隐藏内容时，div 的默认样式会破坏我的内容。
现在我尝试了以下自创的方案，想知道这个方法是否妥当，或者某些浏览器是否会遇到这种方案的问题？如果我删除 display 属性，内容会像没有实验性包装器一样显示，因为它没有任何默认样式。
HTML
<experimental>MYCONTENT</experimental>
CSS
experimental {
display: none;
}
解决方法
您可以像这样将实验内容包装在 <template> 中：
<template>MYCONTENT</template>
这样您就可以在编辑器中进行处理，但不会向用户显示。