Dart 中的子 Web 组件答案

【问题标题】：Sub web component in DartDart 中的子 Web 组件
【发布时间】：2013-01-25 08:12:33
【问题描述】：

是否可以在 Dart 中制作子 Web 组件？

比如说，我有一个x-chatwindow 自定义元素，我希望它有一个x-textarea 和x-textinput 子组件。

一个虚构的实现是：

<x-chatwindow>
    <x-textarea/>
    <x-textinput/>
</x-chatwindow>

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

您是否遇到了具体问题？

您可以在ChatWindowComponent 模板中使用<content></content>：

<element name="x-chat-window" constructor="ChatWindowComponent" extends="div">
  <template>
    <content></content>
  </template>
</element>

然后是你使用它们的页面：

<!DOCTYPE html>
<html>
  <head>
    <link rel="components" href="components/chat_window.html" />
    <link rel="components" href="components/text_area.html" />
    <link rel="components" href="components/text_input.html" />
  </head>
  <body>
    <x-chat-window>
      <x-text-area></x-text-area>
      <x-text-input></x-text-input>
    </x-chat-window>
  </body>
</html>

【讨论】：

目前没有特别的问题。我刚刚在 Google IO 演讲中看到了这一点，但不知道该怎么做。我想我希望父组件以某种方式影响子组件的属性。不知道这是否可能，但这是一个开始。谢谢。

【解决方案2】：

答案在“Dart M3”、“Dart Editor build 20259”和“web_ui 0.4.2 + 5”上测试

除了 Kai Sellgren 的回答，WebComponents 可以隐藏在其他 WebComponents 中。在您的“xchatwindow.html”中，文本区域和文本输入可以链接为；

<!DOCTYPE html>

<head>
  <link rel="components" href="components/xtextarea.html">
  <link rel="components" href="components/xtextinput.html">
</head>
<body>
  <element name="x-chat-window" constructor="FormComponent" extends="div">

...

【讨论】：