Reputation: 1636
I'm building my own live html extension based on webview, however the rendered iframe always gets some default styles attached. Is there a way to remove the default styles?
Screenshot using Webview developer tools:
My template doesn't have all these <html style=
attributes except one:
<!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>
Upvotes: 1
Views: 499
Reputation: 58
npm install normalize.css -D
.npm install tailwindcss -D
in your extension, then you can load the styling using script src=""
around vscode.Webview.asWebviewUri
. The preview resources have to be bundled separately for sanity. It will still be much more secure than the external JS in your snippet.Upvotes: 1