How to use the @stencil/core.Component function in @stencil/core

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

@Component({
  tag: 'dynamic-css-variable',
  styleUrl: 'cmp.css'
})
export class DynamicCssVariables {

  @State() bgColor = 'white';

  getBackgroundStyle() {
    return this.bgColor && this.bgColor !== 'white' ? { 'background': this.bgColor, '--font-color': 'white' } : {};
  }

  changeColor() {
    if (this.bgColor === 'white') {
      this.bgColor = 'red';
    } else {
      this.bgColor = 'white';

{
    icon: '👋',
    label: 'paper',
  },
  {
    icon: '👊',
    label: 'rock',
  },
];

function getRandomIcon() {
  const index = Math.floor(Math.random() * Math.floor(icons.length));
  return icons[index];
}

@Component({
  tag: 'rock-paper-scissor',
  styleUrl: 'rock-paper-scissor.css',
})
export class RockPaperScissor {
  @Element() el: HTMLElement;

  @Prop() icon: Function;

  @State() currentIcon: Icon = getRandomIcon();
  @Event() change: EventEmitter;

  @Watch('currentIcon')
  watchCurrentIcon(currentIcon) {
    this.change.emit(currentIcon);
  }

import {
  Component,
  Element,
  h,
  Host,
  Build,
  Watch,
  Prop
} from "@stencil/core";

@Component({
  tag: "calcite-date-range",
  styleUrl: "calcite-date-range.scss",
  shadow: true
})
export class CalciteDateRange {
  @Element() el: HTMLElement;
  @Prop() start: any;
  @Prop() end: any;
  @Prop() expandDateRange: boolean = false;
  startDate: any;
  endDate: any;
  min: any;
  max: any;

  private startObserver: MutationObserver;
  private endObserver: MutationObserver;

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

import noop from '../../../helpers/noop';

@Component({
  tag: 'app-button',
  styleUrl: 'app-button.pcss'
})
export class AppButton {
  @Prop()
  public label: string = '';

  @Prop()
  public icon: string = '';

  @Prop()
  public onClick: (evt: UIEvent) => void = noop;

  @Prop()
  public disabled: boolean = false;

import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';

import { getIonMode } from '../../global/ionic-global';

import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface';

/**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-slides',
  styleUrls: {
    ios: 'slides.ios.scss',
    md: 'slides.md.scss'
  },
  assetsDir: 'swiper',
})
export class Slides implements ComponentInterface {

  private scrollbarEl?: HTMLElement;
  private paginationEl?: HTMLElement;
  private swiperReady = false;
  private mutationO?: MutationObserver;
  private readySwiper!: (swiper: SwiperInterface) => void;
  private swiper: Promise = new Promise(resolve => { this.readySwiper = resolve; });

import { Component } from '@stencil/core';
import logger from '../../utils/logger';
import loadMark from '../../utils/loadMark';

@Component({
  tag: 'manifold-forward-slot',
})
export class ManifoldForwardSlot {
  @loadMark()
  componentWillLoad() {}

  @logger()
  render() {
    return null;
  }
}

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

@Component({
  tag: 'components-toasts',
})
export class ComponentsToasts {
  @Prop()
  name: string;

  render() {
    return (
      
        <p class="c-paragraph">
          Toasts or growls are covered by special modifiers on{' '}
          Alerts and usually appear in one of the
          corners of your page to draw your attention to something that has happened.
        </p>

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

@Component({
  tag: 'resources-page',
  styleUrl: 'resources-page.css'
})
export class ResourcesPage {

  constructor() {
    document.title = `Stencil Resources`;
  }

  render() {
    return [
      <div class="container">
        <h1 class="headline measure-md">Resources to help you get more out of Stencil</h1>

        <section class="measure-lg">
          <h2>Community Articles/Blogs</h2></section></div>

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

@Component({
  tag: 'objects-modals',
})
export class ObjectsModals {
  @Prop()
  name: string;

  render() {
    return (
      
        
  
    
      <h2 class="c-heading u-xlarge"></h2>

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

@Component({
  tag: 'getting-started',
  styleUrl: 'getting-started.scss'
})
export class GettingStarted {

  render() {
    return [
      
    ]
  }
}