Javascript 下拉菜单在 Dart 模板中不起作用

Question

所以我有一个 javascript 下拉菜单，它可以工作，但是当我将菜单 HTML 放入 Dart 组件模板中时，菜单就不再工作了。我猜这是因为 Javascript 无法再访问这些 DOM 元素。

这是人们普遍遇到的问题吗？有什么解决办法吗？

我的全局 JavaScript 是:

$('body')
.on('mouseenter', '.navbar.main [data-toggle="dropdown"]', function()
{ 
      if (!$(this).parent('.dropdown').is('.open'))
        $(this).click();
});

else {
    $('[data-toggle="dropdown"]').dropdown();
}

$('.navbar.main')
  .on('mouseleave', function(){
    $(this).find('.dropdown.open').find('> [data-toggle="dropdown"]').click();
  });  

<小时/>

所以，最后我在组件中用 Dart 重写了这个 Javascript:

import 'package:angular/angular.dart';
import 'dart:html' show querySelector;
import 'dart:html';

@Component(
    applyAuthorStyles:true,
    publishAs: 'cmp',
    selector: 'menu',
    templateUrl: '../lib/components/menu.html')

class MenuComponent extends AttachAware with ShadowRootAware {

  MenuComponent(Scope scope) {
  }

  void attach() {
  }

  void closeAllOpenMenus(ShadowRoot shadowRoot) {
    shadowRoot.querySelectorAll('.dropdown').classes.remove("open");    
  }

  void onShadowRoot(ShadowRoot shadowRoot) {
    shadowRoot.querySelectorAll('.dropdown-toggle').onMouseEnter.listen((event) {
      closeAllOpenMenus(shadowRoot);

      Element element = event.target.parent;
      element.classes.add("open");
    });    
    shadowRoot.querySelectorAll('.navbar').onMouseLeave.listen((event) {
      closeAllOpenMenus(shadowRoot);
    });    
  }

Answer 1

这是 ShadowDOM 的常见问题。

据我所知jQuery仍然不支持shadowDOM。

.on('mouseenter', '.navbar.main [data-toggle="dropdown"]', function()

此代码不会在组件内找到具有 data-toggle="dropdown" 属性的元素，因此不会应用下拉功能。

这也适用于 Bootstrap 选择器在组件内找不到元素的 CSS。解决方法是在组件内添加或链接 CSS。
这并不能解决选择器的祖先(.ancestor .descendant { color: #fff; } 在组件外部而后代在组件内部的情况，因为此类选择器不会跨影子 DOM边界。