标签: shadow-dom
如何判断元素是否在shadow DOM中？
我有一个项目,我在本地使用shadow DOM(不是通过polyfill).我想检测一个给定element是否包含在shadow DOM或light DOM中.
我已经查看了元素上的所有属性,但似乎没有根据元素所在的DOM类型而有所不同.
如何确定元素是影子DOM还是轻型DOM的一部分？
以下是针对此问题的"shadow DOM"和"light DOM"的示例.
(light root) • Document
(light) • HTML
(light) | • BODY
(light) | • DIV
(shadow root) | • ShadowRoot
(shadow) | • DIV
(shadow) | • IFRAME
(light root) | • Document
(light) | • HTML
(light) | | • BODY
(light) | | • DIV
(shadow root) | | • ShadowRoot
(shadow) | | • DIV
(none) | • [Unattached DIV of second Document]
(none) • [Unattached … 推荐指数
解决办法
查看次数
什么:主机/深度/选择器是什么意思？
请以直截了当的方式解释:host /deep/:
:host /deep/ .ui-autocomplete {
width: 85%;
}
推荐指数
解决办法
查看次数
检查HTML5日期选择器影子DOM
我正在尝试检查某些HTML5控件的shadow DOM,比如input type="date"绑定到a的输入的日期选择器和实际建议下拉列表datalist.最好是在Chrome中,但其他浏览器也会这样做.
我发现通过在Chrome的检查器选项中启用Shadow DOM设置,我可以检查实际的阴影DOM input(包括::-webkit-calendar-picker-indicator显示日期选择器的箭头),但不检查datepicker本身:
同样适用于datalist.看起来这些控件不是输入的一部分,但我也无法在元素面板中的任何其他位置找到它们.
有可能检查这些元素吗？
小编辑澄清:我实际上在寻找哪些伪类适用于哪些控件.有很多,列出其中一些网站,但是我还没有找到它成功地列出源::-webkit-calendar-picker-indicator的datalist元素,这也得到应用.我正在寻找更多那些偷偷摸摸的混蛋,当然最好的来源是马的嘴巴.
推荐指数
解决办法
查看次数
Shadow DOM可以在多大程度上使用polyfill进行模拟？
Shadow DOM W3C草案是否可以通过提供用于搜索和遍历DOM的自定义函数在JavaScript中进行填充？这已经完成了吗？我发现的尝试是相当温顺的垫片,并且似乎没有花费太多努力来模仿规范.
我很欣赏这不是一件容易的事,但是有人给了它一个彻底的考虑？
推荐指数
解决办法
查看次数
使用Firefox检查影子dom
有没有办法在Firefox中检查影子dom元素,就像使用Chrome开发工具一样？
推荐指数
解决办法
查看次数
使用querySelector查找Polymer模板内的嵌套元素将返回null
我正在尝试在新元素(tabs-list)中使用paper-tabs但是在打印选项卡之后我不能使用querySelector来更改所选的.
元素代码(没有样式):
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../sprint-service/sprint-service.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<polymer-element name="tab-list" attributes="show">
<template>
<sprint-service id="service" sprints="{{sprints}}"></sprint-service>
<paper-tabs selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab>
<template repeat="{{sprint in sprints}}">
<paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer('tab-list', {
ready: function() {
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
})
}
});
</script>
</polymer-element>
Index.html代码(whitout样式):
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform-dev/platform.js"></script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="tab-list.html"> …推荐指数
解决办法
查看次数
在Shadow DOM中使用React Component时,单击事件不会触发
我有一个特殊情况,我需要使用Web组件封装React组件.设置似乎很直接.这是React代码:
// React Component
class Box extends React.Component {
handleClick() {
alert("Click Works");
}
render() {
return (
<div
style={{background:'red', margin: 10, width: 200, cursor: 'pointer'}}
onClick={e => this.handleClick(e)}>
{this.props.label} <br /> CLICK ME
</div>
);
}
};
// Render React directly
ReactDOM.render(
<Box label="React Direct" />,
document.getElementById('mountReact')
);
HTML:
<div id="mountReact"></div>
这样安装正常,点击事件有效.现在,当我在React Component周围创建一个Web Component包装器时,它正确呈现,但click事件不起作用.这是我的Web组件包装器:
// Web Component Wrapper
class BoxWebComponentWrapper extends HTMLElement {
createdCallback() {
this.el = this.createShadowRoot();
this.mountEl = document.createElement('div');
this.el.appendChild(this.mountEl);
document.onreadystatechange = () => {
if (document.readyState …推荐指数
解决办法
查看次数
如何在Angular.Dart中以编程方式添加组件？
我想基于从AJAX调用接收的一些信息动态构建组件树.
如何以编程方式从其他组件内部向DOM添加组件？我有<outer-comp>,我想,基于一些逻辑,插入一个<inner-comp>.以下代码只是将元素插入<inner-comp></inner-comp>DOM,而不是实际<inner-comp>表示.
@NgComponent(
selector: 'outer-comp',
templateUrl: 'view/outer_component.html',
cssUrl: 'view/outer_component.css',
publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
}
}
更新: 我设法以下列方式正确渲染内部组件,但我仍然不确定这是否正确:
class AppComponent extends NgShadowRootAware {
Compiler compiler;
Injector injector;
AppComponent(this.compiler, this.injector);
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
BlockFactory template = compiler(inner.nodes);
var block = template(injector);
inner.replaceWith(block.elements[0]);
}
}
推荐指数
解决办法
查看次数
如何使用iframe或shadow dom创建跨浏览器子文档？
我想在JavaScript中创建一个完全封装的子文档,有自己的<head>,<body>,样式,HTML和JS.基本上是阴影dom或iframe,但没有src属性.
虽然我喜欢影子dom的想法,但它的支持率非常低,因此尚未准备好迎接黄金时段.
所以我一直在努力创建一个iframe,但一路上都遇到了各种各样的障碍.这是一个jsFiddle,展示了我的各种尝试.
iframe不能存在于dom中.这部分很关键.为了澄清,如果它暂时存在于dom中是可以的,但它必须能够被提取并且仅存在于JS中.
$('body').append('<iframe id="iframeGenerator" />');
var iframe3 = $('#iframeGenerator');
var iframe3Contents = iframe3.contents();
$('#iframeGenerator').remove();
var head = iframe3.contents().find('head');
甜蜜,我们有头脑
console.log(head.length);
但内容是什么样的？
console.log(iframe3Contents.get(0));
它是一个文档,但不在元素内部,所以让我们尝试将它放在dom或另一个元素的内部？ 以下两种尝试都不起作用,因为选择器没有上下文或某些东西......
$('body').append(iframe3Contents);
var generatedIframe = $('<iframe />').append(iframe3Contents);
我希望能够创建iframe/subdocuemnt而不向dom添加任何内容......但如果我必须,我仍然希望能够随后将其从dom中删除并在js中进一步管理它.
我有这个小功能,它不起作用,但说明了我想要创建的iframe或子文档生成器的类型
var iframeHtml;
giveMeIframe = function() {
var iframeContents;
if (iframeHtml) {
return iframeHtml;
} else {
$('body').append('<iframe id="iframeGenerator" style="display: none" />');
iframeContents = $('#iframeGenerator').contents();
iframeHtml = $('<iframe />');
iframeHtml.append(iframeContents);
$('#iframeGenerator').remove();
return iframeHtml;
}
}
推荐指数
解决办法
查看次数
如何克隆ShadowRoot？
我正在尝试克隆一个影子根，以便可以将<content></content>它们的实例与它们相应的分布式节点交换。
我的方法：
var shadowHost = document.createElement('div');
var shadowRoot = shadowHost.createShadowRoot();
var clonedShadowRoot = shadowRoot.cloneNode(true);
不起作用，因为“ ShadowRoot节点不可克隆”。
这样做的动机是希望检索组成的阴影树，以便可以使用呈现的HTML标记。
由于Shadow DOM的性质，这可能不起作用，对克隆节点的引用很可能会破坏对分布式节点的引用。
组成影子树可能是本机功能，但是在搜索了w3c规范后，我找不到这种方法。
有这样的本机方法吗？否则，手动遍历（在过程中复制树）会起作用吗？
推荐指数
解决办法
查看次数
标签 统计
shadow-dom ×10
javascript ×6
html5 ×3
dom ×2
html ×2
angular ×1
angular-dart ×1
css ×1
dart ×1
dom4 ×1
firefox ×1
html-input ×1
iframe ×1
jquery ×1
polymer ×1
reactjs ×1
toolkitchen ×1