Permalink
Browse files

feat(stylit): Added stylit and Component styles support

  • Loading branch information...
calebdwilliams committed Sep 14, 2018
1 parent 954fa1e commit ad4e6d95252a8dcc7b1b530a268fc818ec8c2121
@@ -199,3 +199,44 @@ ${this.if(this.showTodos)`
</ul>
`}
```

## Styling Component

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`.

```javascript
import { Component } from 'templiteral';
class StyleExample extends Component {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
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');
}
}
```

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,28 +20,28 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">83.6% </span>
<span class="strong">75.46% </span>
<span class="quiet">Statements</span>
<span class='fraction'>311/372</span>
<span class='fraction'>326/432</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.42% </span>
<span class="strong">61.34% </span>
<span class="quiet">Branches</span>
<span class='fraction'>143/206</span>
<span class='fraction'>146/238</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">88.64% </span>
<span class="strong">76.36% </span>
<span class="quiet">Functions</span>
<span class='fraction'>39/44</span>
<span class='fraction'>42/55</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.71% </span>
<span class="strong">76.83% </span>
<span class="quiet">Lines</span>
<span class='fraction'>300/350</span>
<span class='fraction'>315/410</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<div class='status-line medium'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
@@ -59,16 +59,16 @@ <h1>
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="83.6" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.6" class="pct high">83.6%</td>
<td data-value="372" class="abs high">311/372</td>
<td data-value="69.42" class="pct medium">69.42%</td>
<td data-value="206" class="abs medium">143/206</td>
<td data-value="88.64" class="pct high">88.64%</td>
<td data-value="44" class="abs high">39/44</td>
<td data-value="85.71" class="pct high">85.71%</td>
<td data-value="350" class="abs high">300/350</td>
<td class="file medium" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="75.46" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.46" class="pct medium">75.46%</td>
<td data-value="432" class="abs medium">326/432</td>
<td data-value="61.34" class="pct medium">61.34%</td>
<td data-value="238" class="abs medium">146/238</td>
<td data-value="76.36" class="pct medium">76.36%</td>
<td data-value="55" class="abs medium">42/55</td>
<td data-value="76.83" class="pct medium">76.83%</td>
<td data-value="410" class="abs medium">315/410</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 Wed Aug 29 2018 19:34:20 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Fri Sep 14 2018 13:25:07 GMT-0600 (MDT)
</div>
</div>
<script src="prettify.js"></script>
@@ -20,28 +20,28 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">83.6% </span>
<span class="strong">75.46% </span>
<span class="quiet">Statements</span>
<span class='fraction'>311/372</span>
<span class='fraction'>326/432</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.42% </span>
<span class="strong">61.34% </span>
<span class="quiet">Branches</span>
<span class='fraction'>143/206</span>
<span class='fraction'>146/238</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">88.64% </span>
<span class="strong">76.36% </span>
<span class="quiet">Functions</span>
<span class='fraction'>39/44</span>
<span class='fraction'>42/55</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.71% </span>
<span class="strong">76.83% </span>
<span class="quiet">Lines</span>
<span class='fraction'>300/350</span>
<span class='fraction'>315/410</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<div class='status-line medium'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
@@ -59,16 +59,16 @@ <h1>
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="83.6" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.6" class="pct high">83.6%</td>
<td data-value="372" class="abs high">311/372</td>
<td data-value="69.42" class="pct medium">69.42%</td>
<td data-value="206" class="abs medium">143/206</td>
<td data-value="88.64" class="pct high">88.64%</td>
<td data-value="44" class="abs high">39/44</td>
<td data-value="85.71" class="pct high">85.71%</td>
<td data-value="350" class="abs high">300/350</td>
<td class="file medium" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="75.46" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.46" class="pct medium">75.46%</td>
<td data-value="432" class="abs medium">326/432</td>
<td data-value="61.34" class="pct medium">61.34%</td>
<td data-value="238" class="abs medium">146/238</td>
<td data-value="76.36" class="pct medium">76.36%</td>
<td data-value="55" class="abs medium">42/55</td>
<td data-value="76.83" class="pct medium">76.83%</td>
<td data-value="410" class="abs medium">315/410</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 Wed Aug 29 2018 19:34:20 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Fri Sep 14 2018 13:25:07 GMT-0600 (MDT)
</div>
</div>
<script src="../prettify.js"></script>
Oops, something went wrong.

0 comments on commit ad4e6d9

Please sign in to comment.