Loading a web component in Dart M2 (web_ui)

StackOverflow https://stackoverflow.com/questions/13960440

  •  11-12-2021
  •  | 
  •  

Question

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
Was it helpful?

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'>

OTHER TIPS

The way you have it in your main HTML file is correct. You reference foo.html because the referencing HTML document needs to be compiled with dwc. dwc will take the main HTML file and compile it and all the the components it includes. The component are completely compiled to Dart and they .html files won't be used anymore.

If you're trying to edit example.html to include your component, you'll need to compile example.html, and not foo.html. You'll still generate foo.html.dart, but also example.html.dart and a bootstrap script to load everything up.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top