Geek Answers Handbook

Why selector: host only works in chrome with platform.js?

There is a lot of talk about how to create 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 the stylesheet you entered with h1 should encapsulate h1 inside the shadow house of the component.

It is great and works in chrome.

... but it only works in chrome.

Visiting the URL above in firefox does not show any of the bizarre demos; and indeed, they do not work flat at all.

So.

https://github.com/polymer/platform is theoretically a polyfill that allows you to use web components with browsers that do not have built-in support for all the features you need.

In theory, this includes some limited support for CSS rules, see: http://www.polymer-project.org/platform/shadow-dom.html

However, in practical terms, this will not work. Generally.

What's going on here? How can we seriously state that the .js polyfill platform works and supports older browsers when you cannot style your components?

The best solution I've seen is to require the component template to have a known root node class:

<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 root context of the document; otherwise firefox, safari and IE styles do not work.

, -?

- ?

, , , .

, http://codepen.io/shadowmint/pen/iyFxE, platform.js 0.3.4 , ,

+4
1

, , .

Shadom DOM polyfill , shadom dom, .
, /: :()/: host-context() , , , , .

: (?), CSS : host .
x-element, - :

: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;
}
Hide result

, : , .

, , , Firefox/IE/Safari , : .
, .

+3

More articles:


All Articles