sumbad

## webcomponents-principles__4.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML Imports</title>
  <script src="use.js"></script>
</head>
<body>
  <use-web-components></use-web-components>
</body>

## webcomponents-principles__3.js
class UseWebComponents extends HTMLElement {
  connectedCallback(){
    this.innerHTML = `
      <style>
        h1 {
          background-color: dimgray;
          color: darkgray;
        }
      </style>
      <h1>Use Web Components!</h1>

## webcomponents-principles__2.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML Imports</title>
  <link rel="import" href="use.html" id="use" />
</head>
<body>
  <use-web-components></use-web-components>
</body>

## webcomponents-principles__1.html
<template>
  <style>
    h1 {
      background-color: dimgray;
      color: darkgray;
    }
  </style>
  <h1>Use Web Components!</h1>
</template>

## webcomponents-base__html-imports_2.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>HTML Imports</title>
    <link rel="import" href="hello.html" id="hello" />
</head>

<body>

## webcomponents-base__html-imports_1.html
<!DOCTYPE html>
<html>

<body>
    <h1>Hello Web Components!</h1>
</body>

</html>

## webcomponents-base__html-templates_1.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>HTML Templates</title>
</head>

<body>
    <template id="task">

## webcomponents-base__shadow-dom_1.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Shadow DOM</title>
    <style>
        input {
            border-color: red;
            margin: 10px;

## webcomponents-base__custom-elements_4.html
<!DOCTYPE html>
<html>
<head>
    <title>Custom Elements</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.5.0/document-register-element.js"></script>
    <script type="text/javascript">
        class HelloInputCustomElement extends HTMLInputElement {

            connectedCallback() {
                this.setAttribute('value', 'Hello');

## webcomponents-base__custom-elements_3.html
<!DOCTYPE html>
<html>
<head>
    <title>Custom Elements</title>
    <script type="text/javascript">
        class HelloCustomElement extends HTMLElement {
            sayHello() {
                console.log('Hello!');
            }
        }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>HTML Imports</title>
	<script src="use.js"></script>
	</head>
	<body>
	<use-web-components></use-web-components>
	</body>
	class UseWebComponents extends HTMLElement {
	connectedCallback(){
	this.innerHTML = `
	<style>
	h1 {
	background-color: dimgray;
	color: darkgray;
	}
	</style>
	<h1>Use Web Components!</h1>
	<template>
	<style>
	h1 {
	background-color: dimgray;
	color: darkgray;
	}
	</style>
	<h1>Use Web Components!</h1>
	</template>
	<!DOCTYPE html>
	<html>

	<body>
	<h1>Hello Web Components!</h1>
	</body>

	</html>