Namespace: Beta

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Namespace
Source:

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

Beta

Methods

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) createHTMLVisualizer Creates an HTML visualisation of the input CUSTOM EVENTS: "visible-console:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "visible-console:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "visible-console:attribChanged" - When a watched attribute changes. `evt.details` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

A zero dependency web component that will display JavaScript console output on-page.
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
colors object The colors to use for different console output types
bgColors object The background colors to use for different console output types
icons object The icons to use for different console output types
Source:
Example
<visible-console></visible-console>
METHODS FROM BASE:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS:

(static) highlight Convert object to HTML CUSTOM EVENTS: "component-template:connected" - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element. "component-template:ready" - Alias for connected. The instance can handle property & attribute changes "component-template:disconnected" - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element. "component-template:attribChanged" - When a watched attribute changes. `evt.details.data` contains the details of the change. NOTE that listeners can be attached either to the `document` or to the specific element instance. Standard watched attributes (common across all my components):()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name Type Description
inherit-style string | boolean Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
name string Optional. HTML name attribute. Included in output _meta prop. Other watched attributes: None PROPS FROM BASE: (see TiBaseComponent) OTHER STANDARD PROPS:
componentVersion string Static. The component version string (date updated). Also has a getter that returns component and base version strings. Other props:
json object | JSON | string JSON to convert By default, all attributes are also created as properties
Source:
Example
Set the json property on the element
  const showMsg = document.getElementsByTagName('syntax-highlight')[0]
  showMsg.json({....})
METHODS FROM BASE: (see TiBaseComponent)
STANDARD METHODS: