:not selector does not work for nested elements

I have special styles for user generated content, which comes from RTE. And I got some custom components inserted in the user generated content via tags in RTE. Those components should have totally different styles and should not inherit user content styles.

I am trying to achieve this with :not css selector like shown in the snippet below. This works for 1st child of a class, inserted in :not, but not for its children. The third 'Hello' should not receive the red color styling (as I think), but it does. Am I doing something wrong? Is it expected behavior? How can I achieve what I am after?

.user-content :not(.component) p {
  color: red;
  font-size: 50px;
}

<!-- Styled user-content inside some wrapper -->
<div class="user-content">
  <div class="wrapper">
    <p>Hello!</p>
  </div>
</div>

<!-- A component inside user-content should be unstyled -->
<div class="user-content">
  <dov class="component">
    <p>Hello!</p>
  </dov>
</div>

<!-- But nested elements of a component still recieve styling -->
<div class="user-content">
  <div class="component">
    <div class="wrapper">
      <p>Hello!</p>
    </div>
  </div>
</div>