DART 语言中的自定义元素/Shadow Root 与 JavaScript 中的 Shadow Root

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.children.d.onClick，做shadow.querySelector('#d').onClick.
此外，做 dataset['disabled'] 而不是 dataset.disabled.

Answer 3

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

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

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

希望这对您有所帮助。

DART 语言中的自定义元素/Shadow Root 与 JavaScript 中的 Shadow Root

Custom Elements / Shadow Root in DART lang vs Shadow Root in JavaScript

dart

shadow-dom