为什么 :host 选择器只能在带有 platform.js 的 chrome 中工作? [英] Why does the :host selector only work in chrome with platform.js?
问题描述
有很多关于如何设置 Web 组件样式的讨论.
例如，http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ 建议您可以使用 :host 标签来定位组件标签本身，而带有 h1 的注入样式表应该将 h1 封装在组件的 shadow dom 中.
这很棒，并且适用于 chrome.
...但它只适用于 chrome.
在 Firefox 中访问上面的 url 没有显示任何花哨的演示；事实上，它们完全不起作用.
所以.
https://github.com/polymer/platform 理论上是一个 polyfill，可以让你使用 web浏览器不支持所有所需功能的组件.
理论上这包括对 CSS 规则的一些有限支持，请参阅:http://www.polymer-project.org/platform/shadow-dom.html
然而，实际上它不起作用.在所有.
这是怎么回事?当您无法设置组件样式时，我们怎么能认真地声称 platform.js polyfill 可以正常工作并支持旧版浏览器?
我见过的最好的解决方案是要求组件模板有一个已知的根类节点:
<风格>.foo .bar {...}</风格>...<div class='bar'>嗨</div><风格>.foo .bar {...}</风格>
请注意，样式表在模板和中都在文档根上下文中重复；否则 firefox、safari 和 IE 样式将不起作用.
这真的是我们在 Web 组件样式方面所处的水平吗?
我错过了什么吗?
即使使用每个浏览器的最新版本，这看起来确实比人们建议的要很多可用.
这是我一直在玩的一支笔 http://codepen.io/shadowmint/pen/iyFxE 使用 platform.js 0.3.4 并展示了它仅在 chrome 中是如何工作的.
这个问题有点老了，但把这个答案放在这里，以防你还没有弄清楚.
Shadom DOM polyfill 不会尝试在不受支持的浏览器中进行样式封装或修复与 shadom DOM 相关的选择器.
这就是除了 :host/:content 选择器和 :host()/:host-context() 伪类不起作用的原因，你会看到写在 shadow dom leaking 中的样式整个页面.
使 :host 选择器工作(?)的方法是重写 css 规则并将 :host 替换为宿主元素的标记名称.
如果你有一个 x 元素的自定义元素，那么像这样:
:host {不透明度:0.4；过渡:不透明度 420 毫秒缓入缓出；}:主机(:悬停){不透明度:1；}:主机(:活动){位置:相对；顶部:3px；左:3px；}/*将其转换为*/x元素{不透明度:0.4；过渡:不透明度 420 毫秒缓入缓出；}x元素:悬停{不透明度:1；}x元素:活动{位置:相对；顶部:3px；左:3px；}这就是聚合物对的作用:content 选择器，即分布式子节点.
我同意存在代码重复，但我认为没有其他方法可以让 Firefox/IE/Safari 理解 :host 选择器的含义.
希望有帮助.
There's a lot of talk around and about about how to style web components.
For example, http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ suggests that you can use the :host tag to target the component tag itself, while an injected stylesheet with say, h1, should encapsulate the h1 inside the component's shadow dom.
Which is great, and works in chrome.
...but it only works in chrome.
Visiting the url above in firefox doesn't show any of the fancy demo's; and indeed, they flat out don't work at all.
So.
https://github.com/polymer/platform is theoretically a polyfill that lets you use web components with browsers that don't have native support for all the features needed.
In theory this includes some limited support for CSS rules, see: http://www.polymer-project.org/platform/shadow-dom.html
However, practically speaking it doesn't work. At all.
What's going on here? How can we seriously claim that the platform.js polyfill is working and supports older browsers when you can't style your components?
The best solution I've seen to this is to require the component template to have a known root class node:
<template>
<style>
.foo .bar {
...
}
</style>
<div class='foo'>
...
<div class='bar'>Hi</div>
</div>
</template>
<style>
.foo .bar {
...
}
</style>
Note that the stylesheet is duplicated both in the template and in the document root context; otherwise firefox, safari and IE styles do not work.
Is this really the level we're at with web component styling?
Am I missing something?
It really seems like this is much much further away from being usable than people are suggesting, even using the most recent versions of every browser.
Here's a pen I've been playing with http://codepen.io/shadowmint/pen/iyFxE that uses platform.js 0.3.4 and shows how this works only in chrome.
Question is a bit old, but putting this answer here in case you didn't figure it out yet.
Shadom DOM polyfill doesn't attempt style encapsulation or fixing shadom dom related selectors in non-supported browsers.
This is the reason that other than :host/:content selectors and :host()/:host-context() pseudo-classes not working, you'll see style written inside shadow dom leaking on to the whole page.
The way you can make :host selectors work(?), is by rewriting css rules and replacing :host with tag name of host element.
If you have an x-element custom-element then something like this:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
This is what polymer does for :content selectors i.e. distributed child nodes.
I agree there is code duplication, but there is no other way I see in which you can make Firefox/IE/Safari understand what :host selectors mean.
Hope it helps.
这篇关于为什么 :host 选择器只能在带有 platform.js 的 chrome 中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
