javascript - Polymer 2.0 と子への属性の受け渡し

Question

Polymer 2.0 を使って Web Components をいじっています。

私が書きたい最後の HTML は次のようになります。

<card size="small">
  <card-header>
    // Markup
  </card-header>
  <card-body>
    // Markup
  </card-body>
  <card-footer>
    // Markup
  </card-footer>
</card>

ご覧のとおり、サイズを最上位コンポーネントに渡しています。これらのカードの幅に耳を傾け、ヘッダー、ボディ、フッターのパディングを減らすつもりです。サイズが小さくなると、基本的にレスポンシブ要素になります。

どうすればよいか分からないのは、 size の属性値を取得して、card-header、card-body、およびcard-footerpolymer 宣言に渡すことです。

これが私が定義している方法ですcard：

<link rel="import" href="card-header.html">
  <dom-module id="card">
      <template>
        <style>
          // Style things
        </style>

        <slot></slot>
      </template>
      <script>
    Polymer({
      is: 'card',

      properties: {
        size: {
          type: String,
          value: "medium",
          observer: '_observeSize'
        },
      },

      _observeSize: function () {
        const sizes = {
          tiny: "1em",
          small: "2em",
          medium: "3em",
          large: "6em"
        };

        if (this.size == "tiny") {
          this.customStyle['--padding-x'] = sizes.tiny;
          this.customStyle['--padding-y'] = sizes.tiny;
        } else if (this.size == "small") {
          this.customStyle['--padding-x'] = sizes.small;
          this.customStyle['--padding-y'] = sizes.small;
        } else if (this.size == "medium") {
          this.customStyle['--padding-x'] = sizes.medium;
          this.customStyle['--padding-y'] = sizes.medium;
        } else if (this.size == "large") {
          this.customStyle['--padding-x'] = sizes.large;
          this.customStyle['--padding-y'] = sizes.large;
        } else {
          this.customStyle['--padding-x'] = sizes.medium;
          this.customStyle['--padding-y'] = sizes.medium;
        }

        this.updateStyles();
      },

      _responsiveObserver: function () { 
        // Update this.size based on width of this element.
      }

    });
  </script>
</dom-module>

そして、これが私が定義している方法ですcard-header

<dom-module id="card-header">
  <template>
      <style>
        // Style
      </style>
    <slot></slot>

  </template>

  <script>
    Polymer({
      is: 'card-header',

      properties: {
        size: {
          type: String,
        }
      },

      ready: function () {
        console.log(this.size);
        // console.log(hostValue::size); ???? something like this ????
      }
    });
  </script>
</dom-module>

TL;DR: 親ノードの属性値を取得したり、Polymer で DOM の属性を更新せずに特定の子ノード (card-headerまたは)に値を渡したりするにはどうすればよいですか?card-bodycard-footer