Loading a web component in Dart M2 (web_ui)

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)

Leave a Reply

Your email address will not be published. Required fields are marked *