import { 
    LitElement,
    html,
    property,
    customElement
} from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

import {Slim} from 'slim-js'
import {
    tag,
    template,
    attribute
} from 'slim-js/Decorators'

@tag('simple-greeting')
@template('<p>Hello, {{name}}!</p>')
class MyTag extends Slim {
  @attribute
  name
}

<simple-greeting name="Everyone"></simple-greeting>

import 
    Element, { html }
from '@skatejs/element-lit-html';

export default class extends Element {
  static get props() {
    return {
      name: String
    };
  }
  render() {
    return html`
      <p>Hello, ${this.name}!</p>
    `;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

import { html, define } from 'hybrids';
​
export const HelloWorld = {
  name: '',
  render: ({ name }) => html`
    <p>Hello, ${name}</p>
  `,
};
​
define('simple-greeting', HelloWorld);

<simple-greeting name="Everyone"></simple-greeting>

import { define, WeElement, html, render } from 'omi'

define('simple-greeting', class extends WeElement {

  render(props) {
    return html`<p>{props.text}</p>`
  }

});

<simple-greeting name="Everyone"></simple-greeting>

<!-- simple-greeting.riot -->
<p>{ props.message }</p>

import { register, mount, component } from 'riot';
import simpleGreeting from './simple-greeting.riot';

// register the my-component as global component
register('simple-greeting', simpleGreeting);

// find all the DOM nodes called `<simple-greeting>` and
// mount them with the component previously registered
mount('simple-greeting');

<simple-greeting name="Everyone"></simple-greeting>

<p>{name}</p>
<script>
    export default {
        tag: 'simple-greeting',
        props: ['name']
    }
</script>

/**
 * -> Compile it with Svelte CLI
 */

<simple-greeting name="Everyone"></simple-greeting>

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

@Component({
  tag: 'simple-greeting'
})
export class SimpleGreeting {
  @Prop() name: string;

  render() {
    return <p>{this.name}</p>;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'simple-greeting',
  template: `
      <p>{{ name }}</p>
  `
})
export class SimpleGreeting {
  @Input() name: string;
}

<simple-greeting name="Everyone"></simple-greeting>

import { ɵrenderComponent } from '@angular/core';
import { SimpleGreeting } from './simple-greeting.component';

export class SimpleGreetingElement extends HTMLElement {
    private comp: SimpleGreeting;

    constructor() {
        super();
        this.comp = ɵrenderComponent(SimpleGreeting, { host: this });
    }
}

<template>
  <p>{name}</p>
</template>

<script>
    export default {
        name: 'SimpleGreeting',
        props: ['name']
    }
</script>

/**
 * -> Compile it with Vue CLI
 */

<simple-greeting name="Everyone"></simple-greeting>

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import customElement from '@dojo/framework/widget-core/decorators/customElement';
import { v } from '@dojo/framework/widget-core/d';
import { ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';

@customElement({
    tag: 'simple-greeting',
    events: [],
    attributes: ['name'],
    properties: []
})
export default class SimpleGreeting extends ThemedMixin(WidgetBase) {
    protected render() {
        const { name } = this.properties;
        return v('s', {}, [name]);
    }
}

/**
 * -> Compile it with Dojo CLI
 */

<simple-greeting name="Everyone"></simple-greeting>