如何移除VSCode Webview中渲染iframe自带的默认样式？

基于Webview开发自定义实时HTML扩展时，渲染后的iframe被自动附加了非模板自带的默认样式，模板仅包含<html style>属性，需要移除这些额外默认样式。

模板代码如下：

<!DOCTYPE html>
<html lang="en" style="color: red">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body style="background-color: white">
    ${text}
</body>
</html>

• 全局样式重置：在<head>中添加全局重置样式，彻底清除所有默认和继承的样式，再重新定义你的样式：

<head>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  /* 重置所有元素的默认样式 */
  * {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
  }
  /* 彻底重置html和body的所有样式，再重新设置你的需求 */
  html, body {
    all: unset;
    color: red;
    background-color: white;
    width: 100%;
    height: 100%;
  }
</style>
</head>

all: unset会清除元素的所有默认样式、继承样式和自定义样式，之后你可以完全自定义所需样式。

• 禁用Webview容器的默认样式注入：不同Webview容器（如VS Code、Electron等）可能会自动注入基础样式，需在Webview初始化配置中关闭该功能。以VS Code为例，创建Webview时可配置：

const panel = vscode.window.createWebviewPanel(
  'customHtmlPreview',
  '实时HTML预览',
  vscode.ViewColumn.One,
  {
    enableScripts: true,
    // 禁用默认样式注入相关配置
    enableFindWidget: false,
    // 自定义Webview容器样式，覆盖默认值
    style: {
      width: '100%',
      height: '100%'
    }
  }
);

具体配置项需参考你使用的Webview容器官方文档。

• 强制覆盖默认样式：如果无法禁用容器注入的样式，可使用!important强制提升样式优先级，覆盖默认样式：

<html lang="en" style="color: red !important">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body style="background-color: white !important">
    ${text}
</body>
</html>

内容的提问来源于stack exchange，提问作者Sanjay Verma