sumbad

## Vuejs-WebComponents.html
<div id="my-app">
  <p>Introduction text</p>
  <share-buttons/>
</div>

## share-buttons.html
<div id="my-app">
  <p>Introduction text</p>
  <share-buttons>
    <div id="share-buttons">
      <a href="#">Facebook</a>
      <a href="#">Twitter</a>
    </div>
  </share-buttons>
</div>

## theHTMLway.html
<div id="my-app">
  <p>Introduction text</p>
  <share-buttons gplus="false"/>
</div>

<template id="share-buttons-template">
  <div id="share-buttons">
    <a href="#" @click.prevent="share" v-if="facebook">Facebook</a>
    <a href="#" @click.prevent="share" v-if="twitter">Twitter</a>
    <a href="#" @click.prevent="share" v-if="gplus">Google+</a>

## my-vue-componentHTML.html
<html>
  <body>

    ...

    <my-vue-component/>

    <!-- allows multiples instances of the same component -->
    <my-vue-component my-prop="true"/>

## windowCustomElementsDefine.js
class MyElement extends HTMLElement {

  constructor() {
    super();
    this.msg = 'Hello, World!';
  }

  connectedCallback() {
    this.innerHTML = `<p>${this.msg}</p>`;
  }

## customElementMarkup.html
<template id="share-buttons-template">
  <div id="share-buttons">
    <a href="#">Facebook</a>
    <a href="#">Twitter</a>
  </div>
</template>

## DefinesHTMLmarkup.html
<html>
  <head>
    <link rel="import" href="share-buttons.html">
    ...
  </head>
  <body>
    ...
    <share-buttons></share-buttons>
    ...
  </body>

## share-buttons.html
<html>
  <template>
    <div id="share-buttons">
      <a href="#">Facebook</a>
      <a href="#">Twitter</a>
    </div>
  </template>
  <script>
    (function() {
      ...

## dispatchEvent.js
this.dispatchEvent(new Event('content-shared'));

## custom-elements.html
<!DOCTYPE html>
<html>
<head>
	<title>Custom Elements</title>
	<script type="text/javascript">
		class FirstCustomElement extends HTMLElement {
			constructor() {
				super();
				console.log('constructor');
			}
	<div id="my-app">
	<p>Introduction text</p>
	<share-buttons/>
	</div>
	<div id="my-app">
	<p>Introduction text</p>
	<share-buttons>
	<div id="share-buttons">
	<a href="#">Facebook</a>
	<a href="#">Twitter</a>
	</div>
	</share-buttons>
	</div>
	<div id="my-app">
	<p>Introduction text</p>
	<share-buttons gplus="false"/>
	</div>

	<template id="share-buttons-template">
	<div id="share-buttons">
	<a href="#" @click.prevent="share" v-if="facebook">Facebook</a>
	<a href="#" @click.prevent="share" v-if="twitter">Twitter</a>
	<a href="#" @click.prevent="share" v-if="gplus">Google+</a>
	<html>
	<body>

	...

	<my-vue-component/>

	<!-- allows multiples instances of the same component -->
	<my-vue-component my-prop="true"/>
	class MyElement extends HTMLElement {

	constructor() {
	super();
	this.msg = 'Hello, World!';
	}

	connectedCallback() {
	this.innerHTML = `<p>${this.msg}</p>`;
	}
	<html>
	<head>
	<link rel="import" href="share-buttons.html">
	...
	</head>
	<body>
	...
	<share-buttons></share-buttons>
	...
	</body>
	<html>
	<template>
	<div id="share-buttons">
	<a href="#">Facebook</a>
	<a href="#">Twitter</a>
	</div>
	</template>
	<script>
	(function() {
	...
	<!DOCTYPE html>
	<html>
	<head>
	<title>Custom Elements</title>
	<script type="text/javascript">
	class FirstCustomElement extends HTMLElement {
	constructor() {
	super();
	console.log('constructor');
	}