Polymer 1.x: помогите мне стилизовать эту «бумажную кнопку», используя только легкий DOM CSS

Опубликуйте JSFiddle (или JSBin и т. д.), который вертикально центрирует текст «Кнопка» внутри <paper-button> в этом JSFiddle только с помощью CSS в разделе <head> основного <html> документа (т. е. легкий DOM) (т. е. без использования CSS внутри пользовательского элемента, т. е. теневой DOM).

Я хочу, чтобы это выглядело как этот 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>

polymer paper-elements polymer-1.0
person Let Me Tink About It    schedule 13.10.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам просто нужно добавить атрибут:

<style is="custom-style">

к вашему определению стиля.

person Patricklaf    schedule 13.10.2015

arrow_upward
0
arrow_downward

Из принятого ответа:

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>
person Let Me Tink About It    schedule 13.10.2015