SEO-SPA: Hiding with CSS

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <span class="hidden">This text is important for a
    crawler to see, but I can't have it on screen 
    because I need to put my human users first and
    they get to see a rich visual experience instead
    of this text. So I hide it with CSS. Remember that
    this will penalize this text's importance, but it's
    better than not having it visible to crawlers at all.
    </span>
    <my-awesome-canvas-component ></my-awesome-canvas-component>
  `,
  styles: ['.hidden { display: none; }']
})
export class AppComponent {
/* . . . */
}