[web]: <Unable to access the new Div element created using ui.platformViewRegistry.registerViewFactory > #40080
Description
flutter_web:
version: Latest based on the git repo. Dont know how to fetch the version.
chrome: 76.0.3809.132
I created a new Div element using ui.platformViewRegistry.registerViewFactory and displayed it using HtmlElementView widget.
Problem:
I am trying to access this div element using its id in the console but this is not accessible because this new div is added inside a shadow dom as shown in the image, which is not exposed to the document object of the page and hence not accessible to any of the scripts in page. I am not sure if this is expected behavior. I would expect this element to be directly accessible as in document.getElementById('#myid'). Any idea why it is rendered inside a shadow dom.
Flutter doctor output:
[√] Flutter (Channel master, v1.10.1-pre.39, on Microsoft Windows [Version 10.0.17134.950], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.4)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.37.1)
[!] Connected device
! No devices available
! Doctor found issues in 1 category.
Code I used:
import 'package:flutter_web/material.dart';
import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
ui.platformViewRegistry.registerViewFactory("plotly_div_", (int viewId) {
DivElement element = DivElement()
..id = "plotly_div_id_"
..innerHtml = 'Hello World from a Div';
return element;
});
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Directionality(
textDirection: TextDirection.ltr,
child: SizedBox(
width: 640,
height: 360,
child: HtmlElementView(viewType: 'plotly_div_'),
),
),
],
),
),
);
}
}