标签: shadow-dom
在 Salesforce（兔子洞）上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中
我试图了解 Salesforce 如何实施他们的自定义闪电组件元素。我已经阅读了一些帮助文档，这些文档暗示他们遵循 webcomponents 标准。
当我检查页面时：
所以这看起来像典型的 DOM 结构，但是当你进入控制台并查看闪电图标时，它说除非你进入 shadow dom，否则没有 childNodes：
> document.querySelector('lightning-icon.slds-icon-standard-home').childNodes
> NodeList {Symbol(items): Array(0)}
> document.querySelector('lightning-icon.slds-icon-standard-home').shadowRoot.childNodes
> NodeList {0: lightning-primitive-icon, Symbol(items): Array(1)}
现在，通常如果有一个 shadow root 和一个文档片段，它在检查器中作为 #shadow-root (open) 清晰可见。根据此处的 Mozilla 示例：https : //mdn.github.io/web-components-examples/popup-info-box-web-component/
我还注意到自定义元素不是注册的自定义元素。并且SF已经实现了自己的组件库等......
我想知道这是怎么回事？如果节点存储在那里，为什么不显示 #shadow-root 以及如何在纯 JS 中实现自定义元素，以便我可以重新创建。
谢谢！
html javascript web-component shadow-dom salesforce-lightning
推荐指数
解决办法
查看次数
如何在没有 attachShadow 的情况下创建自定义元素？
假设我有一些这样的代码：
class MyElem extends HTMLElement {
constructor() {
super();
let templateContent = document.getElementById('template-elem').content;
this.innerHTML = templateContent.cloneNode(true);
}
}
window.customElements.define('my-elem', MyElem);<template id="template-elem">
<div class="a">
<div class="b">b</div>
<div class="c">c</div>
</div>
</template>
<my-elem></my-elem>为什么这不起作用？在 Chrome 检查器中，自定义元素内部没有 HTML。我也试过这样做：
this.append(templateContent.cloneNode(true));
但这也导致了一个空的 HTML 树。
所有教程都提到使用 shadow DOM，如下所示：
this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true));
虽然这样做有效，但它会强制您将 Shadow DOM 用于您的自定义元素。有没有办法在不需要使用 Shadow DOM 的情况下将模板的 HTML 附加到您的自定义元素？我更喜欢在我的小用例中使用全局 CSS 样式。
推荐指数
解决办法
查看次数
如何使用 Selenium 在 #shadow-root (open) 中与 Cookie pop 交互
我想废弃 immowelt.de，但我无法通过 cookie 横幅。我尝试使用 sleep() 和 WebDriverWait 等待横幅加载，但是它们都不起作用。
这是网络驱动程序的代码
from selenium import webdriver
from selenium.webdriver.common.by import By
import time
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
chrome_driver_path = '.../chromedriver'
url = 'https://www.immowelt.de/immobilienpreise'
driver = webdriver.Chrome(executable_path=chrome_driver_path)
driver.get(url)
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="uc-center-container"]/div[2]/div/div/div/div[1]/button'))).click()
driver.close()
这是带有睡眠的代码
from selenium import webdriver
import time
from selenium.webdriver.common.by import By
chrome_driver_path = '.../chromedriver'
url = 'https://www.immowelt.de/immobilienpreise'
driver = webdriver.Chrome(executable_path=chrome_driver_path)
driver.get(url)
time.sleep(5)
driver.find_element(By.XPATH, '//*[@id="uc-center-container"]/div[2]/div/div/div/div[1]/button').click()
driver.close()
cookies selenium selenium-webdriver shadow-dom queryselector
推荐指数
解决办法
查看次数
聚合物2事件
我正在重写我的Polymer 1.0应用程序Polymer 2.0(和TS),我遇到了一个问题.如何将事件从一个元素转移到另一个元素？我之前使用的是iron-signal,现在我正在尝试使用CustomEvent,但因为ShadowDOM事件没有达到元素.
元素的层次结构大致如下:
1 {2 {3 {4}}}}.
我需要从抛出一个事件element 1来element 4,而在另一种情况下,反之亦然.
我怎样才能做到这一点？只通过window.AddEventListener？
推荐指数
解决办法
查看次数
Web 组件嵌套槽
有没有更好的方法将槽传递给深度嵌套的组件？
索引.html
<outer-comp>
<span slot=foo>Lorem ipsum</span>
</outer-comp>
外部组件：
<inner-comp>
<slot name=foo slot=foo></slot>
</inner-comp>
内部组件：
<slot name=foo></slot>
web-component shadow-dom custom-element native-web-component
推荐指数
解决办法
查看次数
阴影dom内部的脚本不起作用
我已经创建并导出了一个Angular Element（Angular中的Web组件）作为单个脚本标签（user-poll.js）。要使用此Angular元素，我只需要在宿主站点中指定以下两行：
<user-poll></user-poll>
<script src="path/to/user-poll.js"></script>
我有以下要求：
- 在外部站点上加载多个Angular Elements。
- 动态加载所有角度元素
我有以下问题：
- 在站点上加载多个组件会导致Angular冲突，因为每个组件脚本本身就是一个完整的Angular应用。
- 为了解决冲突问题，我将每个组件加载到单独的Shadow Dom组件中（即，在shadow dom容器内添加组件标签和组件脚本文件链接），以便对每个组件进行沙盒处理。但是影子dom内部的组件脚本不起作用。
<body>
</body>
setTimeout(() => {
loadJS();
}, 2000);
function loadJS() {
var elm = document.createElement("div");
elm.attachShadow({mode: "open"});
elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
document.body.appendChild(elm);
}
那么，在站点上动态加载多个Angular Elements的最佳方法是什么？
javascript web-component shadow-dom angular angular-elements
推荐指数
解决办法
查看次数
:host-context 在 Lit-Element Web 组件中没有按预期工作
我有两个 Lit 元素 Web 组件 - 一个是units-list，其中包含许多units-list-item元素。这些units-list-item元素有两种不同的显示模式：紧凑和详细。因为列表元素支持无限滚动（因此可能包含数千个单位），我们需要任何在两种模式之间切换的机制来尽可能提高性能。
这就是为什么我认为一个理想的解决方案是:host-context()在units-list-item元素的样式中使用伪选择器，因为这样每个units-list-item元素都可以通过更改应用于祖先的类（这将在阴影内）在两种显示模式之间切换units-list元素的DOM ）。
详细说明，这里是units-list元素的相关标记。请注意，“触发器”类正在应用于#list-contentsdiv，它是units-list模板的一部分。
<div id="list-contents" class="${showDetails ? 'detail-view table' : 'compact-view table'}">
${units.map(unit => html`<units-list-item .unit="${unit}"></units-list-item>`)}
</div>
如您所见，该showDetails标志控制是将“detail-view”还是“compact-view”类应用于包含所有units-list-item元素的 div 。这些类肯定被正确应用。
这是units-list-item元素的完整渲染方法（删除了不必要的标记）：
render() {
const {unit} = this;
// the style token below injects the processed stylesheet contents into the template
return html`
${style}
<div class="row compact">
<!-- …推荐指数
解决办法
查看次数
使用“<use>”元素为 SVG 生成 IMG src 数据 URI
是否有安全原因阻止<use>元素在数据 URI 图像中工作？我尝试过这样的事情：
const svg = document.querySelector("svg");
const img = document.querySelector("img");
img.src = "data:image/svg+xml;charset=UTF-8," + encodeURI(svg.outerHTML);<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="foo" width="100" height="100"/>
<use xlink:href="#foo" x="10" y="10"/>
</svg>
<img src=""/>如果我直接访问数据 URI，Chrome 和 Firefox 都会给出如下错误消息：
<use>数据 URI 中包含元素的损坏图像示例：
<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22110%22%20height=%22110%22%3E%0A%20%20%3Crect%20id=%22foo%22%20width=%22100%22%20height=%22100%22/%3E%0A%20%20%3Cuse%20xlink:href=%22#foo%22%20x=%2210%22%20y=%2210%22/%3E%0A%3C/svg%3E%0A"/>推荐指数
解决办法
查看次数
Cypress 与 Shadow dom 按钮交互
HTML 屏幕截图
我无法使用我尝试过添加和不添加"includeShadowDom": true到 cypress.json 的 cypress 与影子 dom 按钮进行交互。
我尝试了下面代码的各种排列，但它始终无法找到该元素。
仅.shadow()与父级一起使用会显示错误，指出无法找到影子 dom。
cy.get('#r-searchField').shadow().find('#text-field-container').find('#search-clear').click()
推荐指数
解决办法
查看次数
标签 统计
shadow-dom ×9
javascript ×4
css ×2
html ×2
angular ×1
cookies ×1
cypress ×1
lit-element ×1
polymer ×1
polymer-2.x ×1
selenium ×1
svg ×1