Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Example of CSS Custom Properites for vanilla Shadow DOM">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example of CSS Custom Properites for vanilla Shadow DOM</title>
   <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
​
  <style>
    .some-class{
      --my-element-title-color: blue;
    }
  </style>
  <shadow-host class="some-class"></shadow-host>
  <script>
    (function(){
​
      var shadowDOM = document.querySelector('#shadow-dom');
      function createShadow(shadowHost){
        let shadowRoot = shadowHost.attachShadow({mode:'open'});
        shadowRoot.innerHTML = `
          <style>
            :host{
              --my-element-title-color: red;
            }
            .title {
              color: var(--my-element-title-color);
          }
          </style>
          <p class="title">I'm a .title from Shadow DOM</p>
        `;
      }
      Array.prototype.forEach.call(document.querySelectorAll('shadow-host'), createShadow);
​
    }())
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tomalecpro
0viewers