custom-element-styles v1.0.1

custom-element-styles

Automatically inject styles into a custom element's Shadow DOM once it's created.

Similar to insert-css, except for custom elements.

Usage

styles(Element, css)

Applies the css styles when a ShadowRoot is created on the Element custom element.

require('webcomponents.js')

const styles = require('custom-element-styles')

const CustomElement = {
  prototype: Object.create(HTMLElement.prototype)
}

styles(CustomElement, `
  h1 {
    color: red;
    text-transform: uppercase;
  }
`)

CustomElement.prototype.createdCallback = function() {
  var h1 = document.createElement('h1')
  h1.innerText = 'hello world'
  this.createShadowRoot().appendChild(h1)
}

// Note: it's important that you assign the styles
// *before* the element is registered.
document.registerElement('custom-element', CustomElement)

Alternatively, using brfs and custom-element:

require('webcomponents.js')

const styles        = require('custom-element-styles')
const customElement = require('custom-element')
const fs            = require('fs')

const css = fs.readFileSync(require.resolve('./index.css'), 'utf8')

const CustomElement = customElement()
  .once('created', function() {
    var h1 = document.createElement('h1')
    h1.innerText = 'hello world'
    this.createShadowRoot().appendChild(h1)
  })

styles(CustomElement, css)

document.registerElement('custom-element', CustomElement)

See Also

• webcomponents.js
• custom-element
• insert-css
• brfs

License

MIT. See LICENSE.md for details.