Issue
In Target 8: Define a Custom DOM Tag, the reader is told about custom DOM tags that can be created by extending other tags. A sample is described for an example called “x-converter” before listing the files as “These files implement the app:”.
The three files are…
- a drseuss.html file (not sure why there’s a sudden deviation in the project name and the HTML file, as opposed to the matching names in previous tutorials…),
- a converter-element.html file,
- and a convertercomponent.dart file.
I tried creating a new application in the latest Dart editor, and replaced the default HTML file contents with that of drseuss.html, replaced the default dart file contents with that of convertercomponent.dart, and added converter-element.html file.
After fixing an include issue (the file from the tutorial refers to drseuss.css and not the default project name’s CSS file), I only see the following in the Chromium browser.
As you can see, the element described in the tutorial (converter-element) doesn’t show up. Why don’t the files provided for the project result in what’s shown in the tutorial?
For reference, here’s what’s shown in the tutorial.
Solution
Web UI requires the build.dart
script which compiles the various components into the executable output HTML+Dart.
Take a look at the parent folder in the github src that you reference, and you will see the build.dart
script.
In addition, you will need the pubspec.yaml
from that folder, too, which includes web_ui
package, which brings in the dwc tool(Dart Web Components compiler) used by build.dart
.
Take a look at the article Tools for Web UI for more information about dwc and build.dart, and Target 6 – Getting Started with Web UI which covers similar ground, but in a tutorial format.
Answered By – Chris Buckett
Answer Checked By – Mary Flores (FlutterFixes Volunteer)