Permalink
Browse files

feat(construct-style-sheets): Added the construct style sheets polyfi…

…ll and deprecated stylit

BREAKING CHANGE: Deprecated stylit
  • Loading branch information...
calebdwilliams committed Feb 9, 2019
1 parent 5e3689c commit 18530f969f1133dd25cd629fd4bdde9708ea99af
@@ -225,43 +225,30 @@ ${this.if(this.showTodos)`
`}
```

## Styling Component
## Styling components

There are two primary ways of styling `Component` instances. The first and most obvious is to simply use a `<style>` tag inside of your render callback. If, however, you would prefer to keep your markup and style declarations independent, you can use Component's static `defineStyles` method. The method takes two arguments: `tagName:string, styleText:string`.
The previous method of styling components from version 3.x.x has been deprecated in favor of implementing the [constructible style sheets/adopted style sheets proposal](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md). This package currently consumes the [construct style sheets polyfill](https://www.npmjs.com/package/construct-style-sheets-polyfill) to aid in styling components inside shadow roots.

```javascript
import { Component } from 'templiteral';
class StyleExample extends Component {
/** Construct a new style sheet */
const exampleStyles = new CSSStyleSheet();
/** Replace the contents of the style sheet */
exampleStyles.replace('* { color: tomato; }')
.then(console.log);
class StyleExample extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
/** Adopt the style sheet */
this.shadowRoot.adoptedStyleSheets = [exampleStyles];
}
render() {
this.html`<h1>This content will be the color tomato</h1>`;
}
}
Component.defineStyles('style-example', `
* { color: tomato; }
`);
customElements.define('style-example', StyleExample);
```

Any element will only assume the styles associated with it's tag name, so any custom extensions can be manually adopted:

```javascript
class OtherExample extends StyleExample {
onInit() {
this.constructor.adoptStyles(this.shadowRoot, 'style-example');
this.html`<h1>Hello world, this is tomato colored</h1>`;
}
}
```

You can also asynchronously load styles without affecting the parent document using `Component.loadStyles`, which takes a tag name and a URL to load. However, if you wish to use this with a root component, you may experience a flash of unstyled content. Styles loaded using this method will be immediately fetched, and the resultant style text will only affect the adopting components.

```javascript
Component.loadStyles('tag-name', '/styles/tagName.css');
```
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">77.14% </span>
<span class="strong">77.24% </span>
<span class="quiet">Statements</span>
<span class='fraction'>334/433</span>
<span class='fraction'>370/479</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">62.29% </span>
<span class="strong">64.49% </span>
<span class="quiet">Branches</span>
<span class='fraction'>147/236</span>
<span class='fraction'>158/245</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">75.47% </span>
<span class="strong">80% </span>
<span class="quiet">Functions</span>
<span class='fraction'>40/53</span>
<span class='fraction'>40/50</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">78.27% </span>
<span class="strong">78.75% </span>
<span class="quiet">Lines</span>
<span class='fraction'>317/405</span>
<span class='fraction'>352/447</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file medium" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="77.14" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="433" class="abs medium">334/433</td>
<td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="236" class="abs medium">147/236</td>
<td data-value="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</td>
<td data-value="78.27" class="pct medium">78.27%</td>
<td data-value="405" class="abs medium">317/405</td>
<td data-value="77.24" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.24" class="pct medium">77.24%</td>
<td data-value="479" class="abs medium">370/479</td>
<td data-value="64.49" class="pct medium">64.49%</td>
<td data-value="245" class="abs medium">158/245</td>
<td data-value="80" class="pct high">80%</td>
<td data-value="50" class="abs high">40/50</td>
<td data-value="78.75" class="pct medium">78.75%</td>
<td data-value="447" class="abs medium">352/447</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 22:26:09 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Feb 09 2019 14:11:54 GMT-0600 (CST)
</div>
</div>
<script src="prettify.js"></script>
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">77.14% </span>
<span class="strong">77.24% </span>
<span class="quiet">Statements</span>
<span class='fraction'>334/433</span>
<span class='fraction'>370/479</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">62.29% </span>
<span class="strong">64.49% </span>
<span class="quiet">Branches</span>
<span class='fraction'>147/236</span>
<span class='fraction'>158/245</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">75.47% </span>
<span class="strong">80% </span>
<span class="quiet">Functions</span>
<span class='fraction'>40/53</span>
<span class='fraction'>40/50</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">78.27% </span>
<span class="strong">78.75% </span>
<span class="quiet">Lines</span>
<span class='fraction'>317/405</span>
<span class='fraction'>352/447</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file medium" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="77.14" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="433" class="abs medium">334/433</td>
<td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="236" class="abs medium">147/236</td>
<td data-value="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</td>
<td data-value="78.27" class="pct medium">78.27%</td>
<td data-value="405" class="abs medium">317/405</td>
<td data-value="77.24" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.24" class="pct medium">77.24%</td>
<td data-value="479" class="abs medium">370/479</td>
<td data-value="64.49" class="pct medium">64.49%</td>
<td data-value="245" class="abs medium">158/245</td>
<td data-value="80" class="pct high">80%</td>
<td data-value="50" class="abs high">40/50</td>
<td data-value="78.75" class="pct medium">78.75%</td>
<td data-value="447" class="abs medium">352/447</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 22:26:09 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Feb 09 2019 14:11:54 GMT-0600 (CST)
</div>
</div>
<script src="../prettify.js"></script>
Oops, something went wrong.

0 comments on commit 18530f9

Please sign in to comment.