dglazkov

CSS font values

-apple-system-headline1
-apple-system-headline2
-apple-system-body
-apple-system-subheadline1
-apple-system-subheadline2
-apple-system-footnote
-apple-system-caption1

dglazkov

<element extends="table" name="x-table-chart" constructor="TableChart">
    <script>

        this.lifecycle({
            created: function(shadowRoot) {
                this._canvas = shadowRoot.firstChild;
                this.draw();
            },
            attributeChanged: function(name, oldValue, newValue) {
                if (!name.startsWith('x-chart-'))

dglazkov

Easy Way to Grok Insertion Points

Suppose you're writing a Polymer app. It's a grocery list app to rule all grocery list apps. In it, you have this <grocery-completion> component:

used as:
<grocery-completion data="{{groceries}}"></grocery-completion>

defined as:
<link rel="import" href="../elements/grocery-ingredient-chooser.html">

dglazkov

// dev B:
var aBar = document.createElement('a-bar');
aBar.appendChild(someElement);
var width = someElement.offsetWidth;

dglazkov

 <div id="outerContainer" vertical layout>

    <slot id="headerContent" name="core-toolbar"></slot>

    <div id="mainPanel" flex vertical layout>

      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
        <slot id="mainContent" default></slot>
      </div>

dglazkov

<!-- instance -->
<date-range-combo-box>
  <input type="date" content-slot="start">
  <input type="date" content-slot="end">
</date-range-combo-box>

<template element="date-combo-box">
  <content slot="date"></content>
</template>

dglazkov

I am a Widget Building Man. I bulid widgets. All my widgets are custom elements. Each of my elements has a shadow tree that contains styles.

Situation 1: My widgets share the same set of styles, which makes them consistent and awesome. I keep this set of styles in awesome.css.

Situation 2: Some of my widgets have styles that are long and boring. I want to split them into a separate file, instead of using the style element.

In both situations:

1. What's the easy-peasy HTML syntax for doing this?
2. There's a distinct FOUC moment between instantiating the widget's shadow tree and the styles being available. How do I control that?

dglazkov

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">

dglazkov

#Shadow DOM Imperative API Brainstorming

##Reduced test case:

<div>
  <template shadow> <!-- shadow root -->
    <details>
      <content></content>