Angular 2+ attribute components - child elements suppressed

Question

I have an angular app where I need a custom visual component (with a template) to have its custom tag/element suppressed. The parent app has CSS that gets lost when the new component element is injected. I believe this is a common complaint, and the best suggestion I found was to make the component have an attribute selector.

This seems to work well, but I'm finding that when adding a component with an attribute selector, other elements inside that container element are suppressed. This seems like I'm doing something wrong, or is this a known limitation of attribute selectors?

Here's a quick stackblitz that shows the scenario. I'm hoping it's a simple rookie mistake?

Simple component with attribute selector:

import { Component, Input } from '@angular/core';

@Component({
  selector: '[appAttrib]',
  template: `<span style="color:blue">outer level<span style="color:red"> {{title}}!</span></span>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class AttribComponent  {
  @Input() title: string;
}

Use of component, showing what gets lost:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!--This shows the use of the attribute component.  The component shows up, but the other items in the paragraph do not-->
<p appAttrib title="inner text here">
  Here is some paragraph text.  You won't see this.
  <span>here is some footer stuff.  You won't see this either.</span>
</p>

<!--This shows the same paragraph elements without the attribute component, which obviously will show up.-->
<p>
  Here is some paragraph text without the custom attribute.  You WILL see this.
  <span>here is some footer stuff.  You WILL see this too.</span>
</p>