[pointer_interceptor] Shadow dom tweaks (#364)

packages/pointer_interceptor/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.9.0+1
+
+* Change sizing of HtmlElementView so it works well when slotted.
+
 ## 0.9.0
 
 * Migrates to null safety.

packages/pointer_interceptor/example/integration_test/widget_test.dart

@@ -21,18 +21,24 @@ void main() {
         find.byKey(const Key('clickable-button'));
 
     testWidgets(
-        'on wrapped elements, the browser hits the interceptor (and not the background-html-view)',
+        'on wrapped elements, the browser does not hit the background-html-view',
         (WidgetTester tester) async {
       app.main();
       await tester.pumpAndSettle();
 
       final html.Element? element =
           _getHtmlElementFromFinder(clickableButtonFinder, tester);
-      expect(element?.tagName.toLowerCase(), 'flt-platform-view');
 
-      final html.Element? platformViewRoot =
+      if (html.document.querySelector('flt-glass-pane')?.shadowRoot != null) {
-          element?.shadowRoot?.getElementById('background-html-view');
+        // In flutter master...
-      expect(platformViewRoot, isNull);
+        expect(element?.id, isNot('background-html-view'));
+      } else {
+        // In previous versions (--web-renderer=html only)...
+        expect(element?.tagName.toLowerCase(), 'flt-platform-view');
+        final html.Element? platformViewRoot =
+            element?.shadowRoot?.getElementById('background-html-view');
+        expect(platformViewRoot, isNull);
+      }
     });
 
     testWidgets(
@@ -43,11 +49,17 @@ void main() {
 
       final html.Element? element =
           _getHtmlElementFromFinder(nonClickableButtonFinder, tester);
-      expect(element?.tagName.toLowerCase(), 'flt-platform-view');
 
-      final html.Element? platformViewRoot =
+      if (html.document.querySelector('flt-glass-pane')?.shadowRoot != null) {
-          element?.shadowRoot?.getElementById('background-html-view');
+        // In flutter master...
-      expect(platformViewRoot, isNotNull);
+        expect(element?.id, 'background-html-view');
+      } else {
+        // In previous versions (--web-renderer=html only)...
+        expect(element?.tagName.toLowerCase(), 'flt-platform-view');
+        final html.Element? platformViewRoot =
+            element?.shadowRoot?.getElementById('background-html-view');
+        expect(platformViewRoot, isNotNull);
+      }
     });
   });
 }

packages/pointer_interceptor/example/lib/main.dart

@@ -42,6 +42,11 @@ html.Element htmlElement = html.DivElement()
 //       ..style.border = 'none';
 
 void main() {
+  ui.platformViewRegistry.registerViewFactory(
+    _htmlElementViewType,
+    (int viewId) => htmlElement,
+  );
+
   runApp(const MyApp());
 }
 
@@ -52,13 +57,6 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    ui.platformViewRegistry.registerViewFactory(_htmlElementViewType,
-        (int viewId) {
-      final html.Element wrapper = html.DivElement();
-      wrapper.append(htmlElement);
-      return wrapper;
-    });
-
     return const MaterialApp(
       title: 'Stopping Clicks with some DOM',
       home: MyHomePage(),

packages/pointer_interceptor/lib/src/web.dart

@@ -22,11 +22,8 @@ void _registerFactory({bool debug = false}) {
   final String viewType = _getViewType(debug: debug);
   ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
     final html.Element htmlElement = html.DivElement()
-      ..style.top = '0'
+      ..style.width = '100%'
-      ..style.right = '0'
+      ..style.height = '100%';
-      ..style.bottom = '0'
-      ..style.left = '0'
-      ..style.position = 'relative';
     if (debug) {
       htmlElement.style.backgroundColor = 'rgba(255, 0, 0, .5)';
     }

packages/pointer_interceptor/pubspec.yaml

@@ -1,7 +1,7 @@
 name: pointer_interceptor
 description: A widget to prevent clicks from being swallowed by underlying HtmlElementViews on the web.
 repository: https://github.com/flutter/packages
-version: 0.9.0
+version: 0.9.0+1
 
 environment:
   sdk: ">=2.12.0 <3.0.0"