DART 语言中的自定义元素/阴影根与 JavaScript 中的阴影根

Question

我在这个例子中使用了这个 Shadow Element/root http://jsfiddle.net/fyf6thte/8/ 与 JavaScript 完美配合，有兴趣在 DART 中使用类似的元素，所以我编写了以下代码（使用相同的 html 和 css 文件），但我可以看不到按钮它看起来shadow.innerHTML = '<button id="d">click</button>'不起作用

完整代码为：

import 'dart:html';

void main() {
  var thehost = document.querySelector('#host1');
  document.registerElement(fonixDiv.tag, fonixDiv);
  thehost.append(new fonixDiv());
}

class fonixDiv extends HtmlElement {
static final tag = 'fonix-div';
var shadow;

bool disabled;

factory fonixDiv() => new Element.tag(tag);

fonixDiv.created() : super.created() {

shadow = this.createShadowRoot();

shadow.host.innerHTML = '<button id="d">click</button>';

shadow.host.onClick.listen((e){
                this.host.dataset.disabled='true';   // set Attribute to the custom element
           });


shadow.children.d.onClick.listen((e){
     this.text = "you clicked me :(";
  // or   shadow.children[0].textContent="Shadow DOM content changed";
     this.disabled=true;
   //  alert("All: button, text and host should be change");
});
}

@override
void attached() {
 super.attached();
 this.disabled=disabled;
}
}

我不确定代码余额的准确性，只有看到按钮才能检查。

任何帮助。

Answer 1

似乎.host 应该从此行中删除

shadow.host.innerHTML = '<button id="d">click</button>';

shadow.innerHTML = '<button id="d">click</button>';

jsfiddle 没有它，看起来很奇怪。我认为.host 基本上将其添加到this，因此作为孩子而不是内容。

Answer 2

我认为主要问题是：使用 innerHtml 而不是 innerHTML。

还有一些额外的小问题需要修复：

• 删除'host'，正如Gunter所说，你想设置阴影的innerHtml。

• 使用 shadow.querySelector('#d').onClick 代替 shadow.children.d.onClick。

• 另外，使用 dataset['disabled'] 代替 dataset.disabled。

Answer 3

错误是正确的：在 Dart 中，'this' 没有像在 JS 中那样在上下文中绑定，而是我们有词法作用域；

在您的飞镖代码中，您实际上是在更改自定义元素的文本内容，而不是事件目标（阴影根中的按钮）的文本内容。所以基本上你有一个自定义元素，你在上面设置了文本内容，但是你还在同一个 DOM 节点内创建了一个阴影根，它会隐藏你放在该自定义元素中的所有其他内容，这就是你看不到它的原因继续查看 shadow root 的内容——这就是 shadow root 的设计方式。

要修复它，您需要更新按钮上的文本内容（和 disabled 属性）（例如 e.target.text = ...）。

希望这会有所帮助。