# Namespace: Beta

## Beta

Namespace

Source:
  - collapsible-headings.js, line 45

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - labelled-value.js, line 92

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 56

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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

Source:
  - visible-console.js, line 122

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - collapsible-headings.js, line 45

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - labelled-value.js, line 92

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 56

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### 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

Source:
  - visible-console.js, line 122

### 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:
  - visible-console.js, line 126

##### 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:
  - visible-console.js, line 126

##### 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:
  - syntax-highlight.js, line 60

##### 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:
  - syntax-highlight.js, line 60

##### Example

    Set the json property on the element
      const showMsg = document.getElementsByTagName('syntax-highlight')[0]
      showMsg.json({....})
    METHODS FROM BASE: (see TiBaseComponent)
    STANDARD METHODS: