如何在shadow DOM中选择节点？请考虑以下示例:
"没有阴影"的DOM的结构
<app-element>
#shadow-root
<h2></h2>
<content>
#outside shadow
<h2></h2>
</content>
<ui-button>
#shadow-root
<h2></h2>
</ui-button>
</app-element>
的index.html
<body>
<app-element>
<!-- OK: querySelect('app-element').querySelect('h2') -->
<!-- OK: querySelect('app-element h2') -->
<!-- There is no problem to select it -->
<h2>app-element > content > h2</h2>
</app-element>
</body>
templates.html
<polymer-element name="ui-button" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') -->
<h2>app-element > ui-button > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow').querySelect('h2') -->
<!-- FAIL: querySelect('app-element::shadow h2') -->
<!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') -->
<h2>app-element …我是网络开发的新手,最近我看到很多关于Custom Elements v1的辩论和讨论.它们允许您使用自己的自定义行为定义自己的元素,如果使用Shadow DOM,则使用范围样式.
当我在这个网站上了解它时,我不理解"自定义元素反应"下的表格.任何人都可以解释使用"构造函数"和"connectedCallback"以及术语"创建或升级"和"插入DOM"之间的区别吗？
有关额外信息,我的自定义元素的定义位于单独的文件中,它使用shadow DOM.我使用HTML Import将元素的定义导入主文档.
tl;博士：
aria-labelledby在这种情况下，屏幕阅读器会正确处理吗？例如，考虑这个自定义元素：
(function () {
let template = document.createElement('template')
template.innerHTML = `
<svg viewBox="0 0 206 74"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="logo-title">
<title id="logo-title"><slot>Logo of Some Company.</slot></title>
<path d="..." fill="..."/>
</svg>
`
class Logo extends HTMLElement {
constructor () {
super()
let shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('company-logo', Logo)
})()
这样做是否有效：
<company-logo>
Title One.
</company-logo>
<company-logo>
Some other title.
</company-logo>
这会是一个有效的 DOM，即使两者<title>共享相同的 ID？屏幕阅读器会为第一个徽标读“标题一”，为第二个徽标读“其他标题”吗？
假设我有两个截然不同的 polymer-elements
一个应该使用content占位符嵌入另一个内部.是否有可能在这两个嵌套之间进行数据绑定polymer-elements？
我试过了,但我无法让它工作:http://jsbin.com/IVodePuS/11/
根据http://www.polymer-project.org/articles/communication.html#bindingpolymer-elements应该工作之间的数据绑定(在这些示例中,它们是在template标记内完成而不使用content占位符).
斯科特迈尔斯澄清说,数据绑定只适用于该template级别.
但是在我的情况下,我template事先并不知道确切的但是我想允许我的用户parent-element指定child-element它应该包含哪些(假设有不同的child-elements.
我认为这个问题与这个问题有关:使用在光dom中定义的模板在Polymer元素中
我更新了以下示例以突出显示他:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data1}} </div>
<content />
</template>
<script>
Polymer('parent-element', {
data1 : '',
ready: function() {
this.data='parent content';
}
});
</script>
</polymer-element>
<polymer-element name="child-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child-element', {
data2 : '',
ready: function() { …我正在创造一种聚合物元素.我已经制作了模板,现在正在编写脚本.由于某种原因,document.querySelector为类和id选择器返回null.不确定这是否与聚合物不起作用(没有理由不应该)或者我没有输入某些东西或者其他什么是错误的.
事件card.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="event-card-description.html">
<polymer-element name="event-card" attributes="header image description">
<template>
<style>
.card-header {
display: block;
position: static;
font-size: 1.2rem;
font-weight: 300;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
overflow: hidden;
}
event-card-description {
margin: 0;
position: relative;
top: 225px;
}
</style>
<div
style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover"
class="card-header" layout horizontal center
on-mouseover='{{onHovered}}'
on-mouseout='{{onUnhovered}}'>
<event-card-description
id="description"
header={{header}}
description={{description}}>
</event-card-description>
</div>
</template>
<script>
Polymer('event-card', {
onHovered: function() {
var elem = document.querySelector("#description");
console.log(elem);
}
}); …有没有办法改变阴影元素中的样式？具体来说,扩展/覆盖在css 类中找到的一些属性？我正在使用名为Beanote的chrome扩展程序,自2017年4月(2017年)以来尚未更新,我想修复一个讨厌的错误.我发现一行css补丁对我来说足够了,但是我不知道如何应用它而不进入阴影元素本身并直接在开发工具中编辑这些样式.
我正在寻找一种方法:
/*global css rule*/
.the-class-name { property-name: my-value; }
覆盖这个:
/* style tag inside the shadow-root */
.the-class-name { property-name: bad-value; }
大部分的资源,我与涉及网上查询发现shadow-root override style或edit shadow-root styling有一些东西需要做:host,如果它意味着这个,不适合我的需要或喜欢否决的功能工作::shadow.
我知道规范目前只允许 ::slotted 的复合选择器，即::slotted(my-first + my-second)不允许，但这样的事情应该工作吗？
::slotted(x-first) + ::slotted(x-second) { /* css */ }
有什么方法可以定位开槽的兄弟姐妹（除了使用全局 css）？如果没有，我会在哪里提交这样的请求？谢谢。
Font Awesome在我的 shadow DOM 中不起作用，因为我在其中包含以下内容以防止样式泄漏和泄漏：
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
我可以通过在:host属性中内联其他样式表来使用它们，但这不适用于 Font Awesome，因为它在其样式表中使用了相对路径。
css google-chrome-extension font-awesome shadow-dom tailwind-css
如何让 React 组件的 CSS 在影子根中工作，同时保持 CSS Modules 类的封装优势？我想插入每个组件的<style>元素而不是内部<head>或另一个任意元素。
我目前正在 React 中使用带有自定义 Webpack 脚本的 CSS 模块；[style-loader, css-loader, sass-loader]以传统方式。生成的编译后的 CSS 作为<style>标签注入head.
// MyComponent.jsx
import React from 'react';
import styles from './MyComponent.scss';
export const MyComponent = () => {
return <div className={styles.container}>Hello!</div>
}
// MyComponent.scss
.container {
background: purple;
}
<!-- rendered page -->
<head>
...
<style>.myComponent__container__hash123 { background: purple }</style>
</head>
<body>
...
<div class="myComponent__container__hash123">Hello!</div>
</body>
为了在影子根内部使用，我想将每个组件的编译 CSS …
shadow-dom reactjs webpack webpack-style-loader react-css-modules
是否可以查看Shadow DOM元素是否存在？我并不太关心操纵它,甚至不是真的瞄准它.我理解封装的原因.但是我希望能够根据Shadow DOM元素是否存在来设置常规DOM中的其他元素.
有点像:
if ( $('#element-id #shadow-root').length ) {
// true
}
或者如果不是阴影根,至少是一个特定的元素,比如div的id.因此,如果该div存在,那么很明显Shadow DOM元素在页面上.
我知道这不会那么简单......从我做过的一些研究中,有些事情就像这样>>>,/deep/但他们的支持似乎很低/没有/弃用.购买也许还有另一种方式,不管它有多么优雅？
shadow-dom ×10
css ×4
html ×3
javascript ×3
polymer ×3
dart ×1
dart-polymer ×1
data-binding ×1
font-awesome ×1
html5 ×1
reactjs ×1
tailwind-css ×1
webpack ×1