PUBLICLY SHARED

as containers, until the required JavaScript loads. Then, the elements are
"upgraded" (progressively enhanced) by the browser and their custom behavior
kicks in.

This is a desirable feature for Flutter Web. Programmers can declare what Flutter
Web app to load, and where in the DOM it'll render, but still retain control on when
the Flutter bundle actually starts to download (never before flutter.js is done
upgrading the custom elements!)

DETAILED DESIGN/DISCUSSION
This document proposes defining two new Custom Elements that Flutter Web
programmers may use to embed their apps as described above:

<flutter-app>
The flutter-app Custom Element takes care of getting the app ready to go. It
maps roughly to the existing loadEntrypoint function, and would receive the same
configuration.

When the flutter-app element is connected to the DOM, it:

● attempts to configure the Flutter Service Worker with the files for this flutter
app.
● downloads the engineInitializer object from the appropriate bundle
(main.dart.js)
● waits for a flutter-view element to connect to start rendering the app into
that view
● keeps a reference to the currently running app, so additional views can be
connected/disconnected to it.

If the flutter-app is ever disconnected from the DOM, we should attempt to do as

much cleanup as possible. (Current Flutter apps don't do this.)

<flutter-view>
The flutter-view element is equivalent to a <div> that is passed to Flutter as a
hostNode.

When the flutter-view element is connected to the DOM, it:

● locates its parent flutter-app element

● registers itself as an available view, with its given ID

PUBLICLY SHARED