Dart. How to use @HtmlImport on Polymer example?
I read the doc explaining the @HtmlImprot
implementation ( https://github.com/dart-lang/polymer-dart/wiki/Dart-to-HTML-imports ) but my English is not good enough and I still have a little doubt about using it ... Please consider an example:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
main.dart
@HtmlImport('templates/ui-elements.html')
library main;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
@whenPolymerReady
void onReady() {
print('polymer is loaded');
}
Templates / u-elements.html
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="ui-button" noscript>
<template>
<h2>app-element# > ui-button# > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<h2>app-element# > h2</h2>
<ui-button></ui-button>
</template>
</polymer-element>
Questions:
- Why should I use an ad
library name;
? - Is there a difference between using
@HtmlImport
and<link rel="import" href=""/>
? - Is it common to store all HTML polymeric elements in one HTML file?
- Is it okay to save the entire declaration
@CustomTag()
in a single dart file?
Thanks in advance.
This is the first time I have a cache problem. I don't know, maybe it was @HtmlImport
or the browser itself, but all the changes I made to nothing changed in the templates/ui-elements.html
content.
source to share
Why do I need to use the library name; declaration?
We had to get up somewhere and all files should have a library declaration anyway. It's also close to your import of darts, which is kind.
Is there a difference between using @HtmlImport and?
@HtmlImport
just injects <link rel="import">
into the page. This has advantages such as support for style imports package:
, and it also allows your dart dependencies to declare their own html dependencies, instead of knowing about them.
Is it okay to store an HTML file with a polymer element in one HTML file?
I would not recommend doing this. In general, your life will be easier if each element has its own html file and dart file.
Is it common to keep all @CustomTag () declarations in one dart file?
Same answer as above, I would keep each element class in its own file.
source to share