nunobaba/app.html

## app.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>

<element name="x-app">
  <template>
    <section id="globe">
      <header class="hdr">
        <h1>App Header</h1>
      </header>
    </section>
  </template>
</element>
</body>
</html>

## main.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="import" href="app.html">
  <title>App</title>
</head>
<body>

  <x-app></x-app>

  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="application/dart">main() {}</script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>

## main_test.dart
import 'dart:async';
import 'dart:html';
import 'package:unittest/unittest.dart';
import 'package:web_ui/web_ui.dart';
import 'package:web_ui/observe/html.dart';


main() {
  useShadowDom = true;

  test('Header element is initially present.', () {
    var story = () => expect(query('#hdr'), isNotNull);
    Timer.run(expectAsync0(story));
  });

  test('EchapApp component is loaded.', () {
    var story = () => expect(query('#globe'), isNotNull);
    Timer.run(expectAsync0(story));
  });
}


## main_test.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="import" href="../web/app.html">
  <script src="packages/web_ui/testing/testing.js"></script>
  <title>App Main: Test</title>
</head>
<body>

  <header id="hdr">
    ..Now a component:
  </header>

  <x-app></x-app>

  <script type="application/dart" src="main_test.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	</head>
	<body>

	<element name="x-app">
	<template>
	<section id="globe">
	<header class="hdr">
	<h1>App Header</h1>
	</header>
	</section>
	</template>
	</element>
	</body>
	</html>
	import 'dart:async';
	import 'dart:html';
	import 'package:unittest/unittest.dart';
	import 'package:web_ui/web_ui.dart';
	import 'package:web_ui/observe/html.dart';


	main() {
	useShadowDom = true;

	test('Header element is initially present.', () {
	var story = () => expect(query('#hdr'), isNotNull);
	Timer.run(expectAsync0(story));
	});

	test('EchapApp component is loaded.', () {
	var story = () => expect(query('#globe'), isNotNull);
	Timer.run(expectAsync0(story));
	});
	}