paragraph-text.tsx

import {Component, Element, h, Host, Prop} from '@stencil/core';

@Component({
  tag: 'hy-paragraph-text',
  styleUrls: {
    default: 'paragraph-text.scss',
    content: 'paragraph-text-content.scss',
    landing: 'paragraph-text-landing.scss',
  },
  shadow: false,
})
export class ParagraphText {
  @Prop() variant: string;
  @Prop() placement: string = 'internal';
  @Prop() headerstyle: string = 'default';
  @Element() el: HTMLElement;

  componentDidLoad() {
    let hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (!hyMainDiv.classList.contains('with-sidebar')) {
        this.headerstyle = 'wide';
      }
    }
  }

  render() {
    const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.placement}`, `${this.headerstyle}`].join(
      ' '
    );

    return (
      <Host>
        <div class={classAttributes}>
          <slot></slot>
        </div>
      </Host>
    );
  }
}