Issue
Through my journey of dart, I stumbled upon a “blocker” in terms of loading a component.
While having my component defined as followed:
<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
<template>
<button type="button" class="btn {{classes}}"> {{text}} </button>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
String classes = '';
String text = '';
class FooComponent extends WebComponent {
}
</script>
</element>
and referencing the component as followed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
<link rel="components" href='foo.html'>
</head>
<body>
<h1>example</h1>
<p>Hello world from Dart!</p>
<x-foo></x-foo>
<script type="application/dart">void main() { }</script>
<script type="text/javascript" src="dart.js"></script>
</body>
</html>
and my build script not creating a html file (output folder: foo.html.dart), I’m not sure to which file I have to reference.
The manual is also not declarative enough to solve my issue:
http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components
Referencing to either the definition of the component (foo.html) or it’s generated output (foo.html.dart) is not working. I’ve also double checked the paths of both files through inspection, which just downloaded both files with chromium.
My concluding question:
Is this reference (link element href) pointing to an internal intelligence or to a “physical” available file at runtime? And if secondly, which one (generated (html/dart) or source)?
To avoid misunderstandings, I’ve added a list of my repo:
foo
packages
examples
assets
dart.js
example.html
web
out
foo.html.dart
foo.html
build.dart
Solution
Component file (foo.html
) is missing the <html><body>...</body></html>
tags:
<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>
Both files (examples.html
and foo.html
) must be in the same base directory:
web
examples.html
foo.html
...
Then, examples.html
need be used as argument inside build.dart
:
build(new Options().arguments, ['web/example.html']);
And, finally, foo.html
(that is, web/foo.html
) must be the one to be linked:
<link rel="components" href='foo.html'>
Answered By – Juan Mellado
Answer Checked By – Jay B. (FlutterFixes Admin)