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 。

您需要修复一些其他小问题：

删除＆＃39;主持人＆＃39;，正如Gunter所说，你想要设置阴影的innerHtml。
请执行 shadow.querySelector（＆＃39;＃d＆＃39;）。onClick 。 p>
此外，数据集[＆＃39;已停用＆＃39;] 而不是dataset.disabled。

Answer 3

错误是正确的：在Dart＆＃39;这个＆＃39;不像JS那样绑定上下文，而是我们有词法范围;

你的dart代码中的

实际上是在改变自定义元素的文本内容，而不是事件目标（阴影根中的按钮）。所以基本上你有一个自定义元素，你在它上面设置文本内容，但你也有一个在同一个DOM节点内创建的影子根，它会影响你放在那个自定义元素中的所有其他内容，这就是为什么你看不到它和继续看阴影根的内容 - 这就是影子根的设计方式。

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

希望这会有所帮助。

DART中的自定义元素/阴影根和JavaScript中的阴影根

3 个答案: