无法让 querySelector 与子节点一起工作

Question

在我编写的第一个网页和 dart 代码中 querySelector 可以正常工作。我刚刚在同一个项目中创建了一个带有 class 的库，当第一个脚本创建该 class 的实例时，它会显示第二个网页（这将是一种菜单）并且初始化它。

页面显示 querySelector returns null 子 <div id="text-box"> </div> 但不显示其父 [=17 之后的第一个元素 <div id="main-box"> =].我使用 Google 搜索并查看了 API 并找到了对 ShadowRoot 的引用，但无法使用它。我试过链接 querySelector 但没有成功。

如何访问元素中的元素？

HTML（简体）

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tools Menu</title>
    <link rel='stylesheet' type="text/css" media="screen" href='toolsmenu.css'>
  </head>

  <body>   
    <div id="main-box">      
      <div id="text-box"> </div>
    </div>

    <script type='application/dart' src="ToolsMenu.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

用于调试的 dart 脚本

library ToolsMenu;

import 'dart:html';

class ToolsMenu {
  WindowBase windowBase;
  DivElement mainbox;
  DivElement comments = null;

  void initialize() {
    windowBase = window.open("toolsmenu.html", "_newtab");

    //comments = querySelector('#main-box'); // not null
   comments = querySelector('#text-box');    // FAILS
   // debug
   if(comments == null) {   // always null
     windowBase.close();
     return;
    }
   comments.text = 'It Worked!!'; // never reached.          

  }        
}

Answer 1

querySelector 只搜索当前 window 中的文档。另一个 window 是另一个 Dart 应用程序。您需要在那里加载一个 Dart 脚本，然后这两个应用程序可以使用 postMessage 和 onMessage.listen 进行通信。这里有一些关于如何做的相关问题。

无法让 querySelector 与子节点一起工作

Cannot get querySelector to work with child nodes

dart