[36]

Author: joshualitt

lib/web_ui/lib/src/engine/dom.dart

@@ -40,7 +40,12 @@ extension DomWindowExtension on DomWindow {
   external DomURL get URL;
   external bool dispatchEvent(DomEvent event);
   external DomMediaQueryList matchMedia(String? query);
-  external DomCSSStyleDeclaration getComputedStyle(DomElement elt);
+  DomCSSStyleDeclaration getComputedStyle(DomElement elt,
+          [String? pseudoElt]) =>
+      js_util.callMethod(this, 'getComputedStyle', <Object>[
+        elt,
+        if (pseudoElt != null) pseudoElt
+      ]) as DomCSSStyleDeclaration;
 }
 
 @JS()
@@ -88,6 +93,7 @@ extension DomDocumentExtension on DomDocument {
       String namespaceURI, String qualifiedName);
   external DomText createTextNode(String data);
   external DomEvent createEvent(String eventType);
+  external DomElement? get activeElement;
 }
 
 @JS()
@@ -195,6 +201,14 @@ extension DomNodeExtension on DomNode {
       js_util.setProperty<String?>(this, 'textContent', value);
   external DomNode cloneNode(bool? deep);
   external bool contains(DomNode? other);
+  external void append(DomNode node);
+  external DomNodeList get childNodes;
+  external DomDocument? get ownerDocument;
+  void clearChildren() {
+    while (firstChild != null) {
+      removeChild(firstChild!);
+    }
+  }
 }
 
 @JS()
@@ -248,11 +262,10 @@ extension DomElementExtension on DomElement {
   external void click();
   external bool hasAttribute(String name);
   external DomNodeList get childNodes;
-  void clearChildren() {
-    while (firstChild != null) {
-      removeChild(firstChild!);
-    }
-  }
+  DomShadowRoot attachShadow(Map<Object?, Object?> initDict) => js_util
+          .callMethod(this, 'attachShadow', <Object?>[js_util.jsify(initDict)])
+      as DomShadowRoot;
+  external DomShadowRoot? get shadowRoot;
 }
 
 @JS()
@@ -501,8 +514,12 @@ class DomHTMLStyleElement extends DomHTMLElement {}
 
 extension DomHTMLStyleElementExtension on DomHTMLStyleElement {
   external set type(String? value);
+  external DomStyleSheet? get sheet;
 }
 
+DomHTMLStyleElement createDomHTMLStyleElement() =>
+    domDocument.createElement('style') as DomHTMLStyleElement;
+
 @JS()
 @staticInterop
 class DomPerformance extends DomEventTarget {}
@@ -1146,6 +1163,34 @@ DomFileReader createDomFileReader() =>
     js_util.callConstructor(domGetConstructor('FileReader')!, <Object>[])
         as DomFileReader;
 
+@JS()
+@staticInterop
+class DomDocumentFragment extends DomNode {}
+
+extension DomDocumentFragmentExtension on DomDocumentFragment {
+  external DomElement? querySelector(String selectors);
+  external DomNodeList querySelectorAll(String selectors);
+}
+
+@JS()
+@staticInterop
+class DomShadowRoot extends DomDocumentFragment {}
+
+extension DomShadowRootExtension on DomShadowRoot {
+  external DomElement? get activeElement;
+  external DomElement? get host;
+  external String? get mode;
+  external bool? get delegatesFocus;
+}
+
+@JS()
+@staticInterop
+class DomStyleSheet {}
+
+@JS()
+@staticInterop
+class DomCSSStyleSheet extends DomStyleSheet {}
+
 // A helper class for managing a subscription. On construction it will add an
 // event listener of the requested type to the target. Calling [cancel] will
 // remove the listener. Caller is still responsible for calling [allowInterop]

lib/web_ui/lib/src/engine/embedder.dart

@@ -313,9 +313,9 @@ class FlutterViewEmbedder {
         .instance.semanticsHelper
         .prepareAccessibilityPlaceholder() as html.Element;
 
-    glassPaneElementHostNode.nodes.addAll(<html.Node>[
-      _accessibilityPlaceholder,
-      _sceneHostElement!,
+    glassPaneElementHostNode.appendAll(<DomNode>[
+      _accessibilityPlaceholder as DomNode,
+      _sceneHostElement! as DomNode,
 
       // The semantic host goes last because hit-test order-wise it must be
       // first. If semantics goes under the scene host, platform views will
@@ -327,7 +327,7 @@ class FlutterViewEmbedder {
       // elements transparent. This way, if a platform view appears among other
       // interactive Flutter widgets, as long as those widgets do not intersect
       // with the platform view, the platform view will be reachable.
-      semanticsHostElement,
+      semanticsHostElement as DomNode,
     ]);
 
     // When debugging semantics, make the scene semi-transparent so that the
@@ -384,10 +384,10 @@ class FlutterViewEmbedder {
   // Creates a [HostNode] into a `root` [html.Element].
   HostNode _createHostNode(html.Element root) {
     if (getJsProperty<Object?>(root, 'attachShadow') != null) {
-      return ShadowDomHostNode(root);
+      return ShadowDomHostNode(root as DomElement);
     } else {
       // attachShadow not available, fall back to ElementHostNode.
-      return ElementHostNode(root);
+      return ElementHostNode(root as DomElement);
     }
   }
 
@@ -526,7 +526,7 @@ class FlutterViewEmbedder {
         bodyNode.insertBefore(_resourcesHost!, bodyNode.firstChild);
       } else {
         _glassPaneShadow!.node.insertBefore(
-            _resourcesHost!, _glassPaneShadow!.node.firstChild);
+            _resourcesHost! as DomNode, _glassPaneShadow!.node.firstChild);
       }
     }
     _resourcesHost!.append(element);

lib/web_ui/lib/src/engine/host_node.dart

@@ -5,21 +5,22 @@
 import 'dart:html' as html;
 
 import 'browser_detection.dart';
+import 'dom.dart';
 import 'embedder.dart';
 import 'text_editing/text_editing.dart';
 
 /// The interface required to host a flutter app in the DOM, and its tests.
 ///
-/// Consider this as the intersection in functionality between [html.ShadowRoot]
-/// (preferred Flutter rendering method) and [html.Document] (fallback).
+/// Consider this as the intersection in functionality between [DomShadowRoot]
+/// (preferred Flutter rendering method) and [DomDocument] (fallback).
 ///
-/// Not to be confused with [html.DocumentOrShadowRoot].
+/// Not to be confused with [DomDocumentOrShadowRoot].
 abstract class HostNode {
-  /// Retrieves the [html.Element] that currently has focus.
+  /// Retrieves the [DomElement] that currently has focus.
   ///
   /// See:
   /// * [Document.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement)
-  html.Element? get activeElement;
+  DomElement? get activeElement;
 
   /// Adds a node to the end of the child [nodes] list of this node.
   ///
@@ -31,18 +32,18 @@ abstract class HostNode {
   ///
   /// See:
   /// * [Node.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
-  html.Node append(html.Node node);
+  DomNode append(DomNode node);
+
+  /// Appends all of an [Iterable<DomNode>] to this [HostNode].
+  void appendAll(Iterable<DomNode> nodes);
 
   /// Returns true if this node contains the specified node.
   /// See:
   /// * [Node.contains](https://developer.mozilla.org/en-US/docs/Web/API/Node.contains)
-  bool contains(html.Node? other);
-
-  /// Returns the currently wrapped [html.Node].
-  html.Node get node;
+  bool contains(DomNode? other);
 
-  /// A modifiable list of this node's children.
-  List<html.Node> get nodes;
+  /// Returns the currently wrapped [DomNode].
+  DomNode get node;
 
   /// Finds the first descendant element of this document that matches the
   /// specified group of selectors.
@@ -59,7 +60,7 @@ abstract class HostNode {
   ///
   /// See:
   /// * [Document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
-  html.Element? querySelector(String selectors);
+  DomElement? querySelector(String selectors);
 
   /// Finds all descendant elements of this document that match the specified
   /// group of selectors.
@@ -75,10 +76,10 @@ abstract class HostNode {
   ///
   /// See:
   /// * [Document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
-  List<html.Element> querySelectorAll(String selectors);
+  List<DomElement> querySelectorAll(String selectors);
 }
 
-/// A [HostNode] implementation, backed by a [html.ShadowRoot].
+/// A [HostNode] implementation, backed by a [DomShadowRoot].
 ///
 /// This is the preferred flutter implementation, but it might not be supported
 /// by all browsers yet.
@@ -87,12 +88,12 @@ abstract class HostNode {
 /// supported in the current environment. In this case, a fallback [ElementHostNode]
 /// should be created instead.
 class ShadowDomHostNode implements HostNode {
-  late html.ShadowRoot _shadow;
+  late DomShadowRoot _shadow;
 
-  /// Build a HostNode by attaching a [html.ShadowRoot] to the `root` element.
+  /// Build a HostNode by attaching a [DomShadowRoot] to the `root` element.
   ///
   /// This also calls [applyGlobalCssRulesToSheet], defined in dom_renderer.
-  ShadowDomHostNode(html.Element root) :
+  ShadowDomHostNode(DomElement root) :
     assert(
     root.isConnected ?? true,
     'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.',
@@ -104,9 +105,9 @@ class ShadowDomHostNode implements HostNode {
       'delegatesFocus': false,
     });
 
-    final html.StyleElement shadowRootStyleElement = html.StyleElement();
+    final DomHTMLStyleElement shadowRootStyleElement = createDomHTMLStyleElement();
     // The shadowRootStyleElement must be appended to the DOM, or its `sheet` will be null later.
-    _shadow.append(shadowRootStyleElement);
+    _shadow.appendChild(shadowRootStyleElement);
 
     // TODO(dit): Apply only rules for the shadow root
     applyGlobalCssRulesToSheet(
@@ -117,74 +118,74 @@ class ShadowDomHostNode implements HostNode {
   }
 
   @override
-  html.Element? get activeElement => _shadow.activeElement;
+  DomElement? get activeElement => _shadow.activeElement;
 
   @override
-  html.Element? querySelector(String selectors) {
+  DomElement? querySelector(String selectors) {
     return _shadow.querySelector(selectors);
   }
 
   @override
-  List<html.Element> querySelectorAll(String selectors) {
-    return _shadow.querySelectorAll(selectors);
+  List<DomElement> querySelectorAll(String selectors) {
+    return _shadow.querySelectorAll(selectors) as List<DomElement>;
   }
 
   @override
-  html.Node append(html.Node node) {
-    return _shadow.append(node);
+  DomNode append(DomNode node) {
+    return _shadow.appendChild(node);
   }
 
   @override
-  bool contains(html.Node? other) {
+  bool contains(DomNode? other) {
     return _shadow.contains(other);
   }
 
   @override
-  html.Node get node => _shadow;
+  DomNode get node => _shadow;
 
   @override
-  List<html.Node> get nodes => _shadow.nodes;
+  void appendAll(Iterable<DomNode> nodes) => nodes.forEach(append);
 }
 
-/// A [HostNode] implementation, backed by a [html.Element].
+/// A [HostNode] implementation, backed by a [DomElement].
 ///
 /// This is a fallback implementation, in case [ShadowDomHostNode] fails when
 /// being constructed.
 class ElementHostNode implements HostNode {
-  late html.Element _element;
+  late DomElement _element;
 
-  /// Build a HostNode by attaching a child [html.Element] to the `root` element.
-  ElementHostNode(html.Element root) {
-    _element = html.document.createElement('flt-element-host-node');
-    root.append(_element);
+  /// Build a HostNode by attaching a child [DomElement] to the `root` element.
+  ElementHostNode(DomElement root) {
+    _element = domDocument.createElement('flt-element-host-node');
+    root.appendChild(_element);
   }
 
   @override
-  html.Element? get activeElement => _element.ownerDocument?.activeElement;
+  DomElement? get activeElement => _element.ownerDocument?.activeElement;
 
   @override
-  html.Element? querySelector(String selectors) {
+  DomElement? querySelector(String selectors) {
     return _element.querySelector(selectors);
   }
 
   @override
-  List<html.Element> querySelectorAll(String selectors) {
+  List<DomElement> querySelectorAll(String selectors) {
     return _element.querySelectorAll(selectors);
   }
 
   @override
-  html.Node append(html.Node node) {
-    return _element.append(node);
+  DomNode append(DomNode node) {
+    return _element.appendChild(node);
   }
 
   @override
-  bool contains(html.Node? other) {
+  bool contains(DomNode? other) {
     return _element.contains(other);
   }
 
   @override
-  html.Node get node => _element;
+  DomNode get node => _element;
 
   @override
-  List<html.Node> get nodes => _element.nodes;
+  void appendAll(Iterable<DomNode> nodes) => nodes.forEach(append);
 }

lib/web_ui/lib/src/engine/platform_views/content_manager.dart

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import '../browser_detection.dart';
 import '../dom.dart';
 import '../embedder.dart';
@@ -163,7 +161,7 @@ class PlatformViewManager {
     final DomElement slot = domDocument.createElement('slot')
       ..style.display = 'none'
       ..setAttribute('name', tombstoneName);
-    flutterViewEmbedder.glassPaneShadow!.append(slot as html.Node);
+    flutterViewEmbedder.glassPaneShadow!.append(slot);
     // Link the element to the new slot
     element.setAttribute('slot', tombstoneName);
     // Delete both the element, and the new slot

lib/web_ui/lib/src/engine/text/measurement.dart

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import '../../engine.dart' show registerHotRestartListener;
 import '../dom.dart';
 import '../embedder.dart';
@@ -31,7 +29,7 @@ class RulerHost {
       ..height = '0';
 
     if (root == null) {
-      flutterViewEmbedder.glassPaneShadow!.node.append(_rulerHost as html.Node);
+      flutterViewEmbedder.glassPaneShadow!.node.appendChild(_rulerHost);
     } else {
       root.appendChild(_rulerHost);
     }