我用这样的聚合物定义了一个组件:
<polymer-element name="my-component">
<template>
<div id='test'>CONTENT</div>
</template>
</polymer-element>
现在我想访问阴影dom,例如:获取div id ='test'的内容
var x = $("div#test").html();
给定的代码不起作用.我可以用jquery访问阴影dom吗？
是否可以使用Selenium/Chrome webdriver访问Shadow DOM中的元素？
正如预期的那样,使用普通元素搜索方法不起作用.我在w3c上看到了对switchToSubTree规范的引用,但找不到任何实际的文档,示例等.
任何人都有这个成功吗？
CSS::slotted选择器选择<slot>元素的子元素。
但是，当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时，选择::slotted(* *)器似乎没有生效。
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.innerHTML = `
<style>
::slotted(*) {
display: block;
border: solid blue 1px;
padding: 3px;
}
::slotted(*) span {
display: block;
border: solid red 1px;
padding: 3px;
}
::slotted(* span) {
display: block;
border: solid green 1px;
padding: 3px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-element', MyElement);<my-element>
<p>
<span>Test</span>
</p>
</my-element> …假设我是FakeBook™的朋友小部件的开发者.我为网站所有者提供了一个小部件,可以将这样的个性化消息添加到他们的页面:
你的朋友Michael,Anna和Shirley喜欢这个网页!
span天真地,我创建了一个脚本,将这些信息span放在网站上.但是,ExampleSite的所有者现在可以通过简单的DOM操作访问您朋友的名字!
这是一个很大的隐私/安全问题.
iframe我不希望ExampleSite访问他们朋友的名字.所以相反,我让网站所有者添加小部件iframe:
<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>
这样做,因为ExampleSite的所有者无法刮掉内容iframe.然而,整个iframe事情相当丑陋,因为它没有融入网站的样式,而一个span.
在昨天阅读Shadow Dom时,我想知道这是否可以解决这两个问题.这将允许我有一个脚本,创建一个span原始网站无法访问:
var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';
但是,Shadow DOM是否会将其内容隐藏在周围的页面中？
这里的假设是除了我的脚本之外没有人可以访问root,但这是正确的吗？
在影子DOM规范毕竟说,它提供的功能封装,但其实我是想相信封装.虽然组件模型用例实际列出了这个用例,但我不确定Shadow DOM是否实现了nesessary confinement属性.
为了使我的移动网络应用程序保持精简和高效,我试图在任何给定时间限制DOM上的元素数量.我打算限制DOM元素使用的一种方法是使用伪:before和:after元素在可能的情况下生成内容.
例如,而不是像这样表示具有元数据的列表项:
<dd class="item">
<div class="name">Name</div>
<div class="desc">Description</div>
<div class="location">Location</div>
<div class="genre">Genre</div>
</dd>
我可以这样表示它(并使用content:属性来显示元数据):
<dd class="child"
data-name="Name"
data-desc="Description"
data-location="Location"
data-genre="Genre">
</dd>
因此,一个DOM元素具有数据属性,而不是5个单独的元素,可以说是更清晰的标记.
在这里演示:http://jsfiddle.net/quc8b/2/
这种技术真的会提高性能吗？我的想法是,使用更少的DOM元素,javascript应该更快地解析,我应该能够更快地添加/删除列表项节点.但渲染(即绘画,布局和回流)会更快发生吗？换句话说,CSS生成的内容是否比传统元素和文本节点更快或更有效地呈现/解析？
浏览器内部如何处理渲染树和文档树中的CSS生成内容对我来说是未知的(影子DOM可能？).有没有文章可以讨论这个问题？
我想为元素创建一个shadow DOM,这样我就可以显示Chrome扩展的元素,而不会影响它们的页面样式.
当我查看文档时,Element.createShadowRoot我看到它已被弃用,所以我检查了一下Element.attachShadow.它说我必须提供封装模式,但没有解释不同模式的作用.我搜索了一下,但我无法找到任何清楚解释有什么区别的东西.
模式之间有什么区别,我应该使用哪一种模式来实现？
我正在尝试修改使用 shadow root 创建的 web 组件的样式。
我看到样式被添加到head标签中，但它对shadow root封装没有影响。
我需要的是加载所有组件的样式并使它们在shadow root.
这是创建 Web 组件的一部分：
索引.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './tmp/mockComponent.css'; // This is the styling i wish to inject
let container: HTMLElement;
class AssetsWebComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const { shadowRoot } = this;
container = document.createElement('div');
shadowRoot.appendChild(container);
ReactDOM.render(<App />, container);
}
}
window.customElements.define('assets-component', AssetsWebComponent);
App.ts // 常规反应组件 …
我正在尝试制作一个半可重复使用的小部件,但我遇到了一个问题.我试图在阴影根中封装一些CSS代码,这样它就不会影响网页的其余部分,但是这个CSS用于多个小部件,所以我试图包含一个远程样式表.我找到的所有例子都没有使用远程样式表,我想知道这是否可行.
EX:
<template id="templateContent">
<head>
<link rel="stylesheet" href="css/generalStyle1.css">
</head>
<body>
<div class="affectedByGeneralStyle1"></div>
</body>
</template>
用于包含模板的脚本:
<div id="host"></div>
<script>
var importedData = (html_import_element).import.getElementById("templateContent");
var shadow = document.querySelector('#host').createShadowRoot();
var clone = document.importNode(importedData.content, true);
shadow.appendChild(clone);
</script>
将脚本插入元素的阴影根时有没有办法引用主机元素？
var element = document.createElement('div');
var script = document.createElement('script');
script.innerHTML = 'console.log(host)'; // << How to get host element??
var shadow = element.createShadowRoot();
shadow.appendChild(script);
document.body.appendChild(element);
我需要一个在影子根内的 css 中使用的选择器，它选择影子根的所有子级（但不是孙子级），无论它们是什么标签并且不给它们一个 ID。
在下面的示例中，SPAN、A、P 和 DIV 应该有一个红色边框，但 SPAN IN DIV 没有。
<my-element>
#shadow-root
<span>SPAN</span>
<a>A</a>
<p>P</p>
<div>
DIV
<span>SPAN IN DIV</span>
</div>
<style>
:root>*{border:1px red solid;}
</style>
</my-element>
我希望:root-Selector 可以在 shadow dom 内完成这项工作，但事实并非如此。
如果有人展示如何在影子根上设置 ID，这也是一个可能的解决方案。
更新：
尝试使用#shadow-root > *作为选择器：
似乎不起作用。可能只是谷歌浏览器开发人员工具将阴影根元素可视化。
shadow-dom ×10
css ×5
dom ×4
javascript ×4
html ×2
html5 ×2
jquery ×1
performance ×1
polymer ×1
python ×1
reactjs ×1
security ×1
selenium ×1
stylesheet ×1
templatetag ×1
webpack ×1
widget ×1