title: How can I reset all styles to the browser defaults for a specific element?
body: <p>I'm building a front-end widget which can be embedded on any web page.</p>
  
  <p>I don't want the host page's styles to affect the widget. So, I'd like to reset all styles for <code>#widget</code>, and its descendants, <em>to the browser defaults</em>.</p>
  
  <p>This is what <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/revert" rel="nofollow noreferrer"><code>all: revert</code></a> does – but it doesn't have widespread browser support yet. I'm essentially looking for a polyfill for <code>all: revert</code>.</p>
  
  <p>(The phrase "to their browser defaults" is important. I know that I can use <code>all: initial</code> to reset styles to their <em>initial</em> value. But the initial value is not the same thing as the browser's default value.)</p>
  
  <p>I'm familiar with <a href="https://meyerweb.com/eric/tools/css/reset/" rel="nofollow noreferrer">Eric Meyer's CSS reset</a> and similar resets/boilerplates. Those aren't what I'm looking for. They don't reset <em>all</em> styles – only those which are inconsistent between the major browsers' default stylesheets.</p>
  
  <p>For example, say that the host page contains the style <code>body { font-style: italic }</code> (unlikely, but possible). Boilerplate-type CSS resets would not correct this: the text in my widget would also be italic.</p>
  
  <p>(Please think carefully before marking this question as a duplicate. There are similar questions on Stack Overflow – but many of them were posted many years ago, when the situation was quite different, or they're asking subtly different questions.)</p>
  
  <p>Thanks!</p>