标签: shadow-dom
Web组件中阴影dom的外部样式表
我正在学习带阴影根的Web组件,如果可以通过开箱即用的代码加载外部样式表,似乎无法在谷歌上找到它？我还没有使用聚合物或任何其他Web组件库(还).代码如下:
<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
var hollaProto = Object.create(HTMLElement.prototype);
hollaProto.createdCallback = function () {
var shadow = this.createShadowRoot();
var content = document.querySelector('link[rel=import]').import.querySelector("div");
$("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });
shadow.appendChild(content);
};
var hollaWidget = document.registerElement("holla-back", {
prototype: hollaProto
});
</script>
<div class="holla-back">
<button data-command="holla">Holla!</button>
</div>
如果我将我的链接标记放在第一个脚本标记之上,我将整个网络时代设置为样式,而不是Web组件.
如果我把它放在它下面div.holla-back没有任何风格.
如何将外部样式表与Web组件一起使用？
推荐指数
解决办法
查看次数
编写v1嵌套Web组件
我是webcomponents的新手.由于web组件的v1可用,我从那里开始.我已经在网上阅读了关于他们的各种帖子.我对正确编写它们特别感兴趣.我已经阅读了有关插槽并让它们正常工作的信息,尽管我的努力并未导致按照我的预期方式工作的插槽web组件.
如果我编写了这样的嵌套Web组件,嵌套/开槽web组件中的DOM不会插入父级的插槽中:
<parent-component>
<child-component slot="child"></child-component>
</parent-component>这是父webcomponent HTML:
<div id="civ">
<style>
</style>
<slot id="slot1" name="child"></slot>
</div>由于每个web组件(父组件和子组件)都是独立的,因此我一直在创建它们:
customElements.define('component-name', class extends HTMLElement {
constructor() {
super();
this.shadowRoot = this.attachShadow({mode: 'open'});
this.shadowRoot.innterHTML = `HTML markup`
}
})生成的DOM包括2个阴影根.我试图编写没有阴影dom的子/槽元素,这也不会导致托管孩子的父阴影dom.
那么,构建v1嵌套web组件的正确方法是什么？
推荐指数
解决办法
查看次数
iOS11上的低功耗模式是否会影响修改Shadow DOM元素的伪元素？
在普通电源模式下,在iOS11上(在iPhone 8和X上测试),我可以隐藏视频元素阴影根内的按钮元素覆盖.
启用低功耗模式后,我的伪元素将无法再隐藏按钮元素覆盖.这是怎么回事？如何在低功耗模式下隐藏按钮元素？
我的CSS
// Placed outside Shadow DOM in my SCSS file.
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
要修改的DOM元素
<video style="display: inline;" class="playerElement" poster="" autoplay="true" width="100%" oncontextmenu="return false;">
// Shadow Content (User Agent)
<style>
// Lots of default styles with Apple legal language.
</style>
<div class="media-controls-container">
<div pseudo="-webkit-media-text-track-container" class="visible-controls-bar" style="display: none;"></div>
<div class="media-controls inline ios uses-ltr-user-interface-layout-direction" style="width: 375px; height: 275px;">
<button class="play-pause paused center" aria-label="Play" style="width: 11px; height: 13px; left: 16px;">
<div class="background-tint">
<div class="blur"></div>
<div class="tint"></div>
</div>
<picture …推荐指数
解决办法
查看次数
如何从模板中使用shadow DOM装饰的HTML元素中删除阴影根？[网站组件]
我在Chrome Canary(33.0.1712.3)中探索导入,模板,影子DOM和自定义元素.在网格布局中,我有一个特定的内容元素(显示区域),它将显示从文件导入的不同Web组件或克隆的轻型DOM片段.但是,一旦添加了阴影DOM,我就无法重新显示普通的HTML DOM,因为我不知道如何删除阴影根.一旦创建,阴影根就会保留并干扰普通DOM的呈现.(我已经查看了各种W3C规范,例如Web组件介绍,影子DOM,模板,Bidelman关于HTML5 Rocks的文章等).我在下面的一个简单示例中找到了问题:
点击"show plain old div"; 点击"显示阴影模板"; 点击"show plain old div".每次点击后检查devtools.第三次点击后,按钮下面没有输出,在我看到的devtools中:
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要添加什么来removeShadow()来删除阴影根并完全将内容元素重置为其初始状态？
removing_shadows.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<template id="shadowedTemplateComponent">
<style>
div { background: lightgray; }
#t { color: red; }
</style>
<div id="t">template</div>
<script>console.log("Activated the shadowed template component.");</script>
</template>
<template id="plainDiv">
<div id="plaindiv">Plain old div</div>
</template>
</head>
<body>
<div>
<input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
<input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
<div id="content"></div>
</div> …推荐指数
解决办法
查看次数
自定义元素和可访问性
我想使用当前的Web组件规范实现一个列表框小部件.此外,生成的列表框应符合ARIA标准.实例化列表框小部件应该如下所示:
<x-listbox>
<x-option>Option 1</x-option>
<x-option>Option 2</x-option>
</x-listbox>
出于清洁和封装的目的,其他所有内容都应该以阴影dom呈现.为了实现这个小部件,两个自定义元素,<x-listbox>并<x-option>进行登记.影子dom的顶级元素<x-listbox>是一个<div>带有可访问性role=listbox和aria-activedescendent属性的<x-listbox>元素(我不希望元素上有这些属性,因为它们是实现细节.)
为了aria-activedescendent工作,需要选项元素的ID.将id直接放在<x-option>元素上将不会有两个原因:首先,它会污染使用列表框小部件的文档的id命名空间.其次,更重要的是,id不能跨越阴影边界(这是阴影dom的一个目的),因此选项的id必须<div>与aria-activedescendent属性一样生成在相同的阴影dom中.
对此的解决方案是将每个<x-option>被渲染为阴影dom内部的内容<x-listbox>与另一个<div>(属于该阴影dom),其上可以放置id.
我的问题是:这是正确的方法,如何使用自定义元素和阴影dom web apis实现这一点？
推荐指数
解决办法
查看次数
在影子DOM中查找元素
Protractor 1.7.0引入了一个新功能:一个新的定位器by.deepCss,有助于在shadow DOM中查找元素.
它涵盖了哪些用例？您何时想要到达影子DOM中的元素？
我提出这个问题的原因是我在这个问题的动机部分缺失了 - 我认为量角器主要是一个有助于模仿真实用户交互的高级框架.访问影子树听起来像是一个非常深层次的技术问题,为什么你想这样做让我感到困惑.
selenium css-selectors selenium-webdriver shadow-dom protractor
推荐指数
解决办法
查看次数
访问shadow DOM中的元素
是否可以使用python-selenium 在Shadow DOM中找到元素？
用例示例:
我有这个input有type="date":
<input type="date">我想点击右边的日期选择按钮,然后从日历中选择一个日期.
如果您要检查Chrome开发者工具中的元素并展开日期输入的影子根节点,您会看到该按钮显示为:
<div pseudo="-webkit-calendar-picker-indicator" id="picker"></div>
屏幕截图演示了它在Chrome中的外观:
按ID查找"选择器"按钮会导致NoSuchElementException:
>>> date_input = driver.find_element_by_name('bday')
>>> date_input.find_element_by_id('picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element
我也尝试过使用::shadow和/deep/定位器的建议在这里:
>>> driver.find_element_by_css_selector('input[name=bday]::shadow #picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element
>>>
>>> driver.find_element_by_css_selector('input[name=bday] /deep/ #picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element
请注意,我可以通过向其发送密钥来更改输入中的日期:
driver.find_element_by_name('bday').send_keys('01/11/2014')
但是,我想通过从日历中选择日期来具体设置日期.
推荐指数
解决办法
查看次数
将事件侦听器添加到从模板标记克隆的元素
我正在使用<template>标记创建许多DOM元素(每个元素具有相同的HTML结构):
<template id="weapon-template">
<div class="button">
<div class="button-price" data-price ></div>
<img class="button-image" data-image >
<div class="button-name" data-name ></div>
<div class="button-damage" data-damage></div>
<div class="button-amount" data-amount></div>
</div>
</template>
......以及几行JavaScript:
var clone;
var template = document.getElementById( "weapon-template" );
template.content.querySelector( "[data-image]" ).src = data.prev;
template.content.querySelector( "[data-price]" ).innerHTML = data.cost + "$";
template.content.querySelector( "[data-name]" ).innerHTML = data.name;
template.content.querySelector( "[data-damage]" ).innerHTML = data.damage;
template.content.querySelector( "[data-amount]" ).innerHTML = 0;
clone = document.importNode( template.content, true )
this.container.appendChild( clone );
我想在克隆元素上添加一些事件监听器.我从互联网上找不到任何东西,厌倦了我自己的一些事情,比如:
template.content.querySelector( "[data-price]" ).addEventListener( "click", action, false ); …推荐指数
解决办法
查看次数
我可以访问自定义html标记<component>或<slot>内容
假设我要创建一个自定义html元素,例如:
<video-container>
<video></video>
</video-container>
所以我创建了这样一个模板:
<div class="wrapper">
etc..
<content></content>
</div>
然后我通过HTML元素原型将它附加到页面createdCallback.
内部的回调我希望能够给听众附加到video元素,所以我可以做的东西play,pause等等.如果有无论如何访问传入的视频标签目前尚不清楚给我.我可以接触到的content标签,但它不显示任何子节点.这可能吗？
我可以访问视频元素,如果我只是抓取整个文档并获取视频元素,但这很难看,因为我希望能够只获取当前自定义元素范围内的视频标记.
推荐指数
解决办法
查看次数
Bootstrap JS 的替代品在 shadow dom 中不起作用
我尝试创建一个 shadow DOM 来封装内容 Script 元素，然后应用 Bootstrap 样式，并使 Bootstrap Modal 在 shadow Dom 内工作，以便它可以从网页样式和脚本中封装自己。它可以成功显示内容，但 Bootstrap js 脚本不起作用。
我尝试在 Shadow DOM 中注入所有样式和脚本文件。Bootstrap 样式有效，Bootstrap 脚本无效
$(#id) //the usual way to access a id using jQuery
parentofShadowtree.shadowRoot.querySelector('#id') //to select a element inside shadow DOM
我认为错误是因为 Bootstrap 脚本无法像通常那样访问元素。
我相信由于访问元素的方式发生了变化，这些脚本文件不起作用。
我对吗？有没有办法克服这个问题
推荐指数
解决办法
查看次数
标签 统计
shadow-dom ×10
javascript ×5
html ×3
selenium ×2
css ×1
html5 ×1
ios ×1
iphone ×1
protractor ×1
python ×1
templates ×1
wai-aria ×1