Sub web component in Dart

Issue

Is it possible to make sub web components in Dart ?

Say, for example, I have a x-chatwindow custom element and I would like it to have an x-textarea and x-textinput sub component.

A fictional implementation would be :

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

Solution

Is there a specific problem you are facing?

You can use the <content></content> inside your ChatWindowComponent template:

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

Then the page where you use them:

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

Answered By – Kai Sellgren

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.