withStyles function #

The withStyles function extends a component and makes working with component styles more efficient
by providing a styles function which is invoked injecting CSS into the <head> once for all component instances.

// import it with all other features
import { createCustomElement, withStyles } from 'https://cdn.skypack.dev/ficusjs@3'

// alternatively, import the function directly
// import { withStyles } from 'https://cdn.skypack.dev/ficusjs@3/with-styles'

// import the renderer and html tagged template literal from the uhtml renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@4/uhtml'

// import the css tagged template literal
import { css } from 'https://cdn.skypack.dev/@ficusjs/renderers@4/css'

createCustomElement(
'my-component',
withStyles({
renderer,
styles () {
return css`
my-component button {
background-color: yellow;
color: black;
}
`

},
render () {
return html`<button type="button">A styled button</button>`
}
})
)

The withStyles function automatically handles loading styles based on the component lifecycle hooks.

styles function #

The styles function must be provided when using the withStyles function. This function is invoked and injects CSS into the <head>
once for all component instances.

The styles function can return:

  • a CSS String
  • URL to an external stylesheet
  • a css tagged template literal
  • style element
  • Array containing any combination of the above!

CSS string styles #

Return a string containing styles.

{
styles () {
return `
my-component button {
background-color: yellow;
color: black;
}
`

}
}

External stylesheet #

Return a URL to a stylesheet - must be a fully qualified URL, not a relative path.

External stylesheets are injected into the head as link[rel=stylesheet] tags.

{
styles () {
return 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'
}
}

css tagged template literal #

Return a css tagged template literal.

{
styles () {
return css`
my-component button {
background-color: yellow;
color: black;
}
`

}
}

style element #

Return a style element.

{
styles () {
const cssText = `
my-component button {
background-color: yellow;
color: black;
}
`

const style = document.createElement('style')
style.appendChild(document.createTextNode(cssText))
return style
}
}

Mixed #

Return a mixed array containing multiple combinations of styles.

{
styles () {
return [
'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css',
`
my-component button {
background-color: yellow;
color: black;
}
`
,
css`
my-other-component button {
background-color: yellow;
color: black;
}
`

]
}
}