vue-reactive-style v0.9.7

vue-reactive-style

Reactive CSS  in HTML documents

The Reactive DOM. An amazing, little-known feature of HTML5 browsers is that the CSS text inside STYLE nodes is automatically live "reactive" to updates from JavaScript. Any browser application can easily leverage reactive CSS rules. Here is a Vue example that controls font size.

	<button @click= " size=30 " > larger text </button>
	
	<vue-reactive-style>
		body { font-size: {{ size }}px; }
	</vue-reactive-style>

When the button is clicked, Vue updates the CSS text in the underlying DOM node; the browser then automatically re-parses the CSS and reflows the document, instantly reflecting the new font size.

Install the npm package

yarn add -D vue-reactive-style

Add runtime compiler option

module.exports = {
	runtimeCompiler: true
}

Import once

Import once, in app.vue. Importing defines js-reactive-style as a global component:

import  'vue-reactive-style'

Use in app components

Tag syntax has two basic forms, depending on whether you hand-code the CSS or functionally-generate the CSS. You place hand-coded CSS between open and close reactive-style tags.

  <vue-reactive-style>
    ...css with vue markup here...
  </vue-reactive-style>

Generated CSS is passed via property "template", not by v-html.

  <vue-reactive-style :template="..." />

Theory of Operation

The HTML5 Document Object Model (DOM) defines CSS reactivity within STYLE nodes, (but not CSS brought in from LINK nodes).

To operate within the Vue framework, vue-reactive-style compiles into a STYLE tag, (note the uppercasing), and is decorated with an (intentionally distinctive) attribute "reactive-style". Because the DOM ignores tag case, "STYLE" tag is the same as "style", but with benefit of vue-powered text substitution.

<vue-reactive-style>...</vue-reactive-style>
compiles into DOM: <STYLE reactive-style >...</STYLE>

During runtime, Vue patches any necessary changes into the DOM using textNode updates; automatically, these textNodes updates cause the browser to recompile the CSS therein.

This marvelous DOM pattern forms the basis of vue-reactive-style.

Gene Dronek 1/18