coltpini

:root {

	/* ---- capitalize ------*/
	--capitalize: capitalize;

	/* ---- uppercase ------*/
	--uppercase: uppercase;

	/* ---- italic ------*/
	--italic: italic;

coltpini

:root {

	/* ---- color ------*/
	--color-pinterest: rgba(203,32,39,1);
	--color-google: rgba(205,32,31,1);
	--color-twitter: rgba(85,172,238,1);
	--color-facebook: rgba(59,89,152,1);
	--color-instagram: rgba(60,90,150,1);

	/* ---- breakpoint ------*/

coltpini

:root {
  /* Colors */
  --color-100: --g-blue-100;
  --color-200: --g-green-200;
  
  /* text */
  --text-color-500: --g-grey-800;
  --text-color-300: --g-grey-400;
  
  --body-font-500: --g-sans;

coltpini

shadowRoot.innerHTML = `
  <style>
    :host {
      --warning: var(--warning-color-100, red);
      --default: var(--color-300, grey);
      --primary: var(--color-100, green);
    }
    :host([status="warning"]) button{
      --button-color: var(--warning)
    }

coltpini

class MyElement extends HTMLElement {
  constructor(){
    super();
    const shadowRoot = elem.attachShadow({mode: `open`});
    shadowRoot.innerHTML = `
      <style>
        :host {
          --color: var(--text-color-100, blue);
          display: block;
        }

coltpini

class MyElement extends HTMLElement {
  constructor(){
    super();
    const shadowRoot = elem.attachShadow({mode: `open`});
    shadowRoot.innerHTML = `
      <style>
        :host {
          /* define a custom property here */
          --text-color: blue;
          display: block;

coltpini

class MyElement extends HTMLElement {
  constructor(){
    super();
    const shadowRoot = elem.attachShadow({mode: `open`});
    shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        span {

coltpini

class MyElement extends HTMLElement {
  constructor(){
    super();
  }
}
customElement.define(`my-element`, MyElement)

coltpini

function Parent() {
  this.prop = "prop";
  this.anotherProp = "anotherProp";
}
// can I use arrow functions here?
Parent.prototype.someFunction = function() {
  // ...
};

Parent.prototype.anotherFunction = function() {

coltpini

function *exponents(start) {
    yield start ** 1;
    yield start ** 2;
    yield start ** 3;
    return 4;
}

for (let val of exponents(4)) {
    console.log(val);
}