CSS unset not working as expected. How to resolve?

Question

I all: unset to unset all inheritance property but allow user agent stylesheet. How can I do it? As you can see in code it's disabling all styles even user agent stylesheets. How can I prevent user agent stylesheet disabling?

h1, h2 {
    color: red;
    font-size: 24px;
    font-weight: bold;
}
.editor_data * {
    all: unset;
}

<div class="main_block">
    <h2>Should be red</h2>
    <div class="editor_data">
    <h1><u><em><strong>Should be underlined, bold, italics, but not red</strong></em></u></h1>
    </div>
</div>

Answer 1

Try the keyword revert instead of initial or unset

The revert keyword is useful for isolating embedded widgets or components from the styles of the page that contains them, particularly when used with the all property.

In user stylesheets, revert rolls back the cascade and resets the property to the default value established by the user-agent stylesheet.

MDN

h2 {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

.editor_data * {
  all: revert;
}

<div class="main_block">
  <h2>Hello world!</h2>
  <div class="editor_data">

    <h1><u><em><strong>Hello world!</strong></em></u></h1>
  </div>
</div>