CODEWITHSUNDEEP
polymerpolymer-1.0paper-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Polymer 1.x: Help me style this <paper-button> using light DOM CSS only

Please post a JSFiddle (or JSBin, etc...) that vertically centers the "Button" text inside the <paper-button> in this JSFiddle by using CSS in the <head> section of the main <html> document (i.e., light DOM) only (i.e., not by using CSS inside the custom element — i.e., shadow DOM).

I want it to look like this JSFiddle.

Modify this using light DOM 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-button {
      --paper-button: {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        };
      background: black;
      color: white;
      height: 100%;
      border-radius: 0;      
      border-left: 1px solid white;
      margin-right: -16px;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <paper-button>Button</paper-button>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style></style>
    <paper-button>Button</paper-button>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>
Example of target output (using shadow DOM CSS) 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
  <dom-module id="x-element">
  <template>
    <style>
      :host {
        height: 100%;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          };
        background: black;
        color: white;
        height: 100%;
        border-radius: 0;      
        border-left: 1px solid white;
        margin-right: -16px;
      }
    </style>
    <paper-header-panel>
      <paper-toolbar>
        <span>Header</span>
        <span class="flex"></span>
        <paper-button>Button</paper-button>
      </paper-toolbar>
      <div>Content goes here...</div>
    </paper-header-panel>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</html>

Upvotes: 0

Views: 1170

Answers (2)

Let Me Tink About It
Let Me Tink About It

Reputation: 16102

From accepted answer:

http://jsfiddle.net/pkx736up/1/ 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style is="custom-style">
    paper-button {
      --paper-button: {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        };
      background: black;
      color: white;
      height: 100%;
      border-radius: 0;      
      border-left: 1px solid white;
      margin-right: -16px;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <paper-button>Button</paper-button>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style></style>
    <paper-button>Button</paper-button>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Upvotes: 0

Patricklaf
Patricklaf

Reputation: 316

You just have to add the attribute :

<style is="custom-style">

to your style definition.

Upvotes: 2

Related Questions