title: In Angular 7 - How do I style HTML thats projected using ng-content
body: <p>In Angular 7 - How do I style HTML thats projected using ng-content.</p>
  
  <p><strong>Tech</strong>: Angular 7, Angular CLI, SASS, HTML5, Webpack.</p>
  
  <p><strong>My Code:</strong></p>
  
  <p><strong>Note</strong>: my component html with transclusion / projection.
  This component has a scss file and the html that comes through the ng-content can only be styled if ng-deep is used e.g. :host::ng-deep</p>
  
  <pre><code>&lt;table&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>This is my sass for the above components html:</strong></p>
  
  <pre><code>:host::ng-deep {
    table {
      background-color: map-get($theme-brand, flat);
      display: flex;
      flex-direction: column;
      border: 1px solid map-get($theme-contrast, contrast-8);
      border-radius: 5px;
  
      tr {
        display: flex;
        justify-content: flex-end;
      }
  
      th, td {
        @extend %p-2;
        word-break: break-all;
        align-items: center;
        display: flex;
        text-align: right;
        width: 250px;
        color: map-get($theme-typography-color, regular);
  
        &amp;:first-child {
          text-align: left;
          border: none;
          width: 100%;
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>Note</strong>: So the above css for tr and th, td won't get styled due to the projection preventing the styling unless I use the ng-deep.</p>
  
  <p><strong>Things tried</strong>:</p>
  
  <ul>
  <li>ng-deep (which works but don't want to use as its deprecated soon by browsers).</li>
  </ul>