Article Encapsulated

Overview

When custom components are placed within DaffArticleComponent, the article's styles may unintentionally affect the component's internal elements. The directive adds the daff-ae class to the component or container it's applied to, encapsulating it from the article's styles.

Usage

Use daffArticleEncapsulated as an attribute selector:

import { DaffArticleEncapsulatedDirective } from '@daffodil/design';

@Component({
  selector: 'custom-component',
  template: 'custom-component.html',
  imports: [
    DaffArticleEncapsulatedDirective,
  ],
})
export class CustomComponent { }

<h3 daffArticleEncapsulated></h3>

Or as an Angular host directive:

@Component({
  selector: 'custom-component',
  template: 'custom-component.html',
  hostDirectives: [
    {
      directive: DaffArticleEncapsulatedDirective,
    },
  ],
})
export class CustomComponent { }

Example

DaffArticleComponent styles descendant headings with specific font sizes, weights, and margins. Without encapsulation, a pricing card nested inside an article would inherit those heading styles, breaking the card's layout:

<div class="app-pricing-card">
  <h3>Premium Plan</h3>
  <p>$9.99/mo</p>
</div>

<!-- Using [daffArticleEncapsulated] prevents article styles from affecting the card: -->

<div class="app-pricing-card" daffArticleEncapsulated>
  <h3>Premium Plan</h3>
  <p>$9.99/mo</p>
</div>