Repository: flutter
Issue: HtmlElementView attached to ShadowRoot doesn't allow JavaScript Element.requestFullscreen() on Flutter Web app
Labels: engine,platform-web,has reproducible steps,P2,found in release: 2.10,found in release: 2.11,team-web,triaged-web

## Steps to Reproduce

1. Create a simple flutter web app and attach DivElement '<div id="video-player"></div>' by using platformViewRegistry.registerViewFactory and HtmlElementView.
2. Run the web app on Google Chrome
3. Call JavaScript Element.requestFullscreen() for the DivElement '<div id="video-player"></div>' from Flutter UI button to request Fullscreen mode on the browser.

**Expected results:**
The Flutter Web app UI should stays with fullscreen mode

**Actual results:**
The Flutter Web app goes to fullscreen mode; however, it exists the fullscreen mode right away.


When I directly attached the div tag via document.body!.append, the JavaScript Element.requestFullscreen() works fine but cannot attach the div inside of Flutter Widget component with this way.
It seems like the issue is because the HtmlElementView with DivElement goes under #shadow-root DOM is outside of main root DOM.

References:
* https://docs.flutter.dev/release/breaking-changes/platform-views-using-html-slots-web
ShadowDOM - The Shadow DOM API provides a way to attach a hidden separated DOM to an element.

* https://docs.google.com/document/d/1U6aCSuzQsFpOP8_OseL-fwl2-MC2bxJAsgt2R_-sC30/edit

The reason of doing this is because we have our own custom video player JavaScript in order to handle DRM and video streaming.

<details>
  <summary>Sample Code</summary>

```dart
// JavaScript requestFullscreen doesn't work with this
Widget videoPlayerSurface(BuildContext context, {required String id}) {
    var divTag = DivElement();
    divTag.id = id;
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry
        .registerViewFactory('$id-view', (int viewId) => divTag);
    return HtmlElementView(key: UniqueKey(), viewType: '$id-view');
}

bool requestFullscreen(DivElement element) {
  var elem = new JsObject.fromBrowserObject(element);

  if (elem.hasProperty("requestFullscreen")) {
    elem.callMethod("requestFullscreen");
    return true;
  } else {
    List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
    for (String vendor in vendors) {
      String vendorFullscreen = "${vendor}RequestFullscreen";
      if (vendor == 'moz') {
        vendorFullscreen = "${vendor}RequestFullScreen";
      }
      if (elem.hasProperty(vendorFullscreen)) {
        elem.callMethod(vendorFullscreen);
        return true;
      }
    }
  }
  return false;
}
```

```dart
// JavaScript requestFullscreen works and the web app stays with fullscreen in this way but cannot make it as Flutter Widget Component.
Widget videoPlayerSurface(BuildContext context, {required String id}) {
    var playerDiv = querySelector('#$id');
    if (playerDiv == null) {
      var divTag = DivElement();
      divTag.id = id;
      document.body!.append(divTag);
    }
// Dummy container
    final Size size = MediaQuery.of(context).size;
    return Container(
      key: Key('$id-container'),
      width: size.width,
      height: ((size.width * 9) / 16),
    );
}
```

</details>

<details>
  <summary>Logs</summary>

Google Chrome console output:
```
WebGL: INVALID_OPERATION: delete: object does not belong to this context
```

</details>

<details>
  <summary>Flutter  Doctor</summary>

```
[✓] Flutter (Channel stable, 2.10.0, on macOS 12.2.1 21D62 darwin-arm, locale en-US)
    • Flutter version 2.10.0 at /Users/user1/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f105a6ca7 (2 weeks ago), 2022-02-01 14:15:42 -0800
    • Engine revision 776efd2034
    • Dart version 2.16.0
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/user1/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_SDK_ROOT = /Users/user1/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
```

</details>