Question

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

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

虚构的实施将是：

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

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

Answer 2

在“Dart M3”，“Dart编辑器构建20259”和“web_ui 0.4.2 + 5”上测试答案

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

<!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">

...

Dart中的子Web组件

2 个答案: