Class Sophistry

constructor

• new Sophistry(): Sophistry

• Returns Sophistry

context

import

• import(link, name?): StyleSheet

• Import a stylesheet defined in an external CSS file. Optionally specify a name for the imported style in the Scophystry context (cache). The name will default to the portion of the link before the first apostrophe...

  Parameters

  • link: string
  • Optional name: string

  Returns StyleSheet

  Example

  const style = mySophistry.import('style.css');
  Copy

process

• process(root, replace?): StyleSheet[]

• Processes and 'pops' all style tags within the root. Ensures that the same CSSStyleSheet can be reused across document trees (maindocument and shadow roots) instead of duplicated even when they have been created declaratively.

  If replace is truthy, any cached stylesheets with the same name (or hash) as a styleshhet within the root will be replaced (reactively).

  This resolves the stated issue with declaratively adding encapsulated styles to elements when using shadow DOM as described here; https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM.

  Parameters

  • root: Element
  • Optional replace: boolean

  Returns StyleSheet[]

  Example

  const element = apriori.createFragment(apriori.get('markup.html'));
  const styles = mySophistry.process(element);
  document.body.append(element);
  for (let style of styles) style.style(element, document.body.firstElementChild);
  Copy

set

• set(name, css): StyleSheet

• Replaces the text of an existing stylesheet. This is reactive.

  Parameters

  • name: string
  • css: string

  Returns StyleSheet

  Example

  mySophistry.set('style.css', await apriori.get('new-style.css'));  // override everything.
  Copy