khola

import { Component, OnInit, ViewEncapsulation, Input, HostListener, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "custom-message",
  template: `
    <p [class]="type">
      {{message}}
    </p>
  `,
  styles: [

khola

<template id="my-custom-component">
    <span></span>
</template>
<script type="text/javascript">
    class MyCustomComponent extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('my-custom-component');
            const templateContent = template.content;

khola

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

@Component({
    tag: 'my-custom-button',
    styleUrl: 'my-custom-button.scss'
})
export class MyCustomButtonComponent {

    @Prop() myCustomAttribute: string;
    @State() checked: boolean;