In CSS/BEM: how do we name a sub-block that is related to its parent block?

bem.html

<!-- Simplest solution is to just label the element as a element within an element -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="block__element__element">
      Content related to `block__element`
    </div>
  </div>
</div>

<!-- You could have a separate block element inside of the parent block but how does the naming convention work? -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="newblock">
      Content related to `block__element` but is now namespaced under `newblock` which is wrong
    </div>
  </div>
</div>

<!-- Harry Roberts suggestion -->
<div class="block">
  Content
  <div class="block__element newblock">
    Content
    <div class="newblock__element">
      Content related to `block__element` but is now namespaced under `newblock` which is wrong
    </div>
  </div>
</div>

I'd argue that an element within an element should never exist, and it should simply be an explicit element in it's own right, i.e:

.block {
  &__element {
    // ...
  }

  &__element-child {
    // ...
  }
}

That also makes it more flexible for re-use IMO, and keeps names shorter, easier to read, and easier to understand. Basically, stick to always only having one block, one element, and one modifier at a time.

As for blocks within blocks, I'd argue that they should just be totally separate, for example:

<div class="block">
  ...
  <div class="newblock">
    ...
    <div class="newblock__element">
      ...
    </div>
  </div>
</div>

This again helps you follow the same above principle easier.