Using HTML slots to render platform views in the web

Code

The engine may print a warning message to the console similar to:

Height of Platform View type: [$viewType] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.

or:

Width of Platform View type: [$viewType] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.

Previously, the content returned by [PlatformViewFactory functions][] was resized and positioned by the framework. Instead, Flutter now sizes and positions <flt-platform-view-slot>, which is the parent of the slot where the content is projected.

To stop the warning above, platform views need to set the style.width and style.height of their root element to any appropriate (non-null) value.

For example, to make the root html.Element fill all the available space allocated by the framework, set its style.width and style.height properties to '100%':

ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
  final html.Element htmlElement = html.DivElement()
    // ..other props
    ..style.width = '100%'
    ..style.height = '100%';
  // ...
  return htmlElement;
});

If other techniques are used to lay out the platform view (like inset: 0) a value of auto for width and height is enough to stop the warning.

Read more about [CSS width][] and [CSS height][].

Tests

After this change, user's test code does not need to deeply inspect the contents of the shadow root of the App. All of the platform view contents will be placed as direct children of flt-glass-pane, wrapped in a flt-platform-view element.

Avoid looking inside the flt-glass-pane shadow root, it is considered a "private implementation detail", and its markup can change at any time, without notice.

(See Relevant PRs below for examples of the "migrations" described above).