Tests.html

Test Code Element

Implements W3C/Google webcomponent

A webcomponent provides a custom tag : <some-customtag>user content</some-customtag> with user content inserted into a slot, e.g., a child element within the custom element's shadowDom: <slot>user content</slot>. Below, we've used two custom <code-block> elements imbedded in a flex container, floated to the left.

Some initial text - yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada. Sample code-block:

class X { public: X(); X(const X& x); -- members elided -- };

Fig 1. a caption

Here's the user code from the body of this page:

<code-block class="codeTheme"> class X { public: X(); X(const X& x); -- members elided -- }; <hr style="border-top:1px solid white;" />Fig 1. a caption </code-block>

More text - yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada. yada yada yada.

Here's the custom component code:

<script>
  /* custom webcomponent - CodeBlock*/

  class CodeBlock extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML =
        `
  <style>
    #outer {
      display: flex;
      padding: var(--padding);
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    #inner {
      white-space: pre;
      width: min-content;
      font-family: consolas, monospace, line-height:1.2;
      padding: 0px 25px;
      background-color: var(--background-color);
      color: var(--color);
      box-shadow: var(--box-shadow);
      font-family: var(--font-family);
      font-size: var(--font-size);
      font-weight: var(--font-weight);
    }
  </style>
  <div id="outer><div id="inner><slot></slot></div></div>`;
    }
  }
  /* register with DOM - don't need to use script block to execute */

  window.customElements.define('code-block', CodeBlock);
</script>

Several styles defined with css variables are used to style the <code-block>'s internal child elements, e.g.:

--background-color
--color
--box-shadow
--font-family
--font-size
--font-weight
--padding

CSS styles code-block and .codeTheme, defined in the <head> section of this page, use these variables.

    code-block {
      display:block;
      --background-color:#004225;
      --color:#fefefa;
      --padding:10px 25px 10px 0px;
      --font-family:Consolas, monospace;
      --font-weight:normal;
      --font-size:1.0em;
      float:left;
      --box-shadow: 3px 3px 5px #999;
    }
    /* uncomment .codeTheme to use this class */
    /*.codeTheme {
      --background-color:#253529; 
      --color: #fefefa;
      --font-weight:normal;
    }*/

View page source to see all the details.

References: