stenciljs-modal-overlay__logic-step1.tsx

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

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop({mutable: true}) isActive = false;

  public toggleActivity() {
    this.isActive = !this.isActive;
  }

  render() {
    return <div class={'modal ' + (this.isActive ? 'active' : '')}>
      <div class="modal__content">
        <a href="javascript:;" class="close" onClick={() => this.toggleActivity()}>&times;</a>
        <div class="modal__content-body">Lorem ipsum...</div>
      </div>
    </div>;
  }
}