Wrapping leaf nodes in non polymer elements

runtime/observatory/lib/src/elements/error_ref_wrapper.dart

Index: runtime/observatory/lib/src/elements/error_ref_wrapper.dart
diff --git a/runtime/observatory/lib/src/elements/error_ref_wrapper.dart b/runtime/observatory/lib/src/elements/error_ref_wrapper.dart
new file mode 100644
index 0000000000000000000000000000000000000000..b0d9015fb6e1572fc930999c9b310181f35e7815
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/error_ref_wrapper.dart
@@ -0,0 +1,46 @@
+// Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+library error_ref_element;
+
+import 'dart:html';
+import 'package:observatory/repositories.dart' show ErrorRefMock;
+import 'package:observatory/service_html.dart' show ServiceMap;
+import 'package:observatory/src/elements/error_ref.dart';
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/shims/binding.dart';
+
+class ErrorRefElementWrapper extends HtmlElement {
+
+  static final binder = new Binder<ErrorRefElementWrapper>(
+    const [const Binding('ref')]);
+
+  static const tag = const Tag<ErrorRefElementWrapper>('error-ref');
+
+  ServiceMap _error;
+  ServiceMap get ref => _error;
+
+  ErrorRefElementWrapper.created() : super.created() {
+    binder.registerCallback(this);
+    createShadowRoot();
+    render();
+  }
+
+  @override
+  void attached() {
+    super.attached();
+    render();
+  }
+
+  void render() {

[rmacnak, 2016/07/11 17:54:01]

I think this is much nicer than the html templates :)

[Cutch, 2016/07/11 17:55:39]

Me too!

[cbernaschina, 2016/07/11 18:14:11]

Done.

+    shadowRoot.children = [];
+    if (ref == null) return;
+
+    shadowRoot.children = [
+      new StyleElement()
+        ..text = '@import "packages/observatory/src/elements/css/shared.css";',
+      new ErrorRefElement(new ErrorRefMock(message: ref['message']))
+    ];
+  }
+}