#Shadow DOM Imperative API Brainstorming
##Reduced test case:
<div>
<template shadow> <!-- shadow root -->
<details>
<content></content>
#Shadow DOM Imperative API Brainstorming
##Reduced test case:
<div>
<template shadow> <!-- shadow root -->
<details>
<content></content>
<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"> |
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:
<!-- 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> |
<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> |
// dev B: | |
var aBar = document.createElement('a-bar'); | |
aBar.appendChild(someElement); | |
var width = someElement.offsetWidth; |
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">
<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-')) |
/* Scenario A: | |
The most naive example of what a developer expects. | |
*/ | |
div.innerHTML = '<foo-bar></foo-bar>'; | |
// <foo-bar>'s readyCallback must be called here. | |
div.firstChild.methodOnFooBar(); | |
/* Scenario B: | |
HTMLInputElement as Custom Element, Part 1. | |
*/ |