| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Target 8: Define a Custom DOM Tag" | 3 title: "Target 8: Define a Custom DOM Tag" |
| 4 description: "Define a custom DOM element tag with help from the Web UI package" | 4 description: "Define a custom DOM element tag with help from the Web UI package" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: web-components | 7 id: web-components |
| 8 --- | 8 --- |
| 9 | 9 |
| 10 {% capture whats_the_point %} | 10 {% capture whats_the_point %} |
| 11 | 11 |
| 12 * Make your own DOM element tags with the <element> tag. | 12 * Make your own DOM element tags with the <element> tag. |
| 13 * A custom element requires a template and can have a script. | 13 * A custom element requires a template and can have a script. |
| 14 * Use data binding to connect Dart variables to content. | 14 * Use data binding to connect Dart variables to content. |
| 15 * Directly attach event handlers in HTML. | 15 * Directly attach event handlers in HTML. |
| 16 | 16 |
| 17 {% endcapture %} | 17 {% endcapture %} |
| 18 | 18 |
| 19 {% capture sample_links %} | 19 {% capture sample_links %} |
| 20 | 20 |
| 21 <p> | 21 <p> |
| 22 Get the source code for the samples featured in this target:</p> | 22 Get the source code for the samples featured in this target:</p> |
| 23 | 23 |
| 24 <ul> | 24 <ul> |
| 25 <li> | 25 <li> |
| 26 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/drseuss" | 26 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/drseuss" |
| 27 target="_blank">drseuss</a> | 27 target="_blank">drseuss</a> (web_ui) |
| 28 </li> |
| 29 <li> |
| 30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08-polymer/drseuss" |
| 31 target="_blank">drseuss</a> (polymer) |
| 28 </li> | 32 </li> |
| 29 <li> | 33 <li> |
| 30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/convertthis" | 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/convertthis" |
| 31 target="_blank">convertthis</a> | 35 target="_blank">convertthis</a> |
| 32 </li> | 36 </li> |
| 33 </ul> | 37 </ul> |
| 34 | 38 |
| 35 {% endcapture %} | 39 {% endcapture %} |
| 36 | 40 |
| 37 {% capture content %} | 41 {% capture content %} |
| 38 | 42 |
| 43 <hr> |
| 44 |
| 45 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
| 46 <font size="24"> |
| 47 <i class="icon-bullhorn"> </i> |
| 48 </font> |
| 49 |
| 50 The Dart Web UI team recently |
| 51 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> |
| 52 a port of the Polymer project: |
| 53 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>. |
| 54 |
| 55 We've converted most of the tutorial Web UI examples and compiled some |
| 56 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> |
| 57 along the way. |
| 58 Check out source code for the polymer version of the |
| 59 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t
arget08-polymer/drseuss" |
| 60 target="_blank">drseuss</a> |
| 61 example. |
| 62 </aside> |
| 63 |
| 64 <hr> |
| 65 |
| 39 Custom elements are one kind of web component | 66 Custom elements are one kind of web component |
| 40 defined in the Web Components model. | 67 defined in the Web Components model. |
| 41 Using templates and scripts, | 68 Using templates and scripts, |
| 42 a custom element defines a new DOM tag | 69 a custom element defines a new DOM tag |
| 43 that extends an existing tag. | 70 that extends an existing tag. |
| 44 This target shows you how to define a custom element | 71 This target shows you how to define a custom element |
| 45 and how to create an instance of that element. | 72 and how to create an instance of that element. |
| 46 Dart's implementation of custom elements is in the | 73 Dart's implementation of custom elements is in the |
| 47 <a href="http://pub.dartlang.org/packages/web_ui" | 74 <a href="http://pub.dartlang.org/packages/web_ui" |
| 48 target="blank">Web UI package</a>, | 75 target="blank">Web UI package</a>, |
| (...skipping 344 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 393 </a> | 420 </a> |
| 394 </div> | 421 </div> |
| 395 <div class="span3"> | 422 <div class="span3"> |
| 396 <a href="/docs/tutorials/fetchdata/" class="pull-right">Fetch Data Dynamically
<i class="icon-chevron-right"> </i> </a> | 423 <a href="/docs/tutorials/fetchdata/" class="pull-right">Fetch Data Dynamically
<i class="icon-chevron-right"> </i> </a> |
| 397 </div> | 424 </div> |
| 398 </div> | 425 </div> |
| 399 | 426 |
| 400 {% endcapture %} | 427 {% endcapture %} |
| 401 | 428 |
| 402 {% include tutorial.html %} | 429 {% include tutorial.html %} |
| OLD | NEW |