Polymer 1.x：帮我设计这个 <paper-button> 只使用 light DOM CSS答案

【问题标题】：Polymer 1.x: Help me style this <paper-button> using light DOM CSS onlyPolymer 1.x：帮我设计这个 <paper-button> 只使用 light DOM CSS
【发布时间】：2015-10-13 07:24:21
【问题描述】：

请在<paper-button> in this JSFiddle 主文档的<head> 部分（即, light DOM）仅（即，不通过在自定义元素内使用 CSS - 即 shadow DOM） .

I want it to look like this JSFiddle.

使用 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>

目标输出示例（使用 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>

【问题讨论】：

标签： polymer polymer-1.0 paper-elements

【解决方案1】：

你只需要添加属性：

<style is="custom-style">

到您的样式定义。

【讨论】：

【解决方案2】：

来自接受的答案：

Link to JSFiddle

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>

【讨论】：