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: