diff --git a/assets/styles/spec.css b/assets/styles/spec.css index 22415b12..fa7f63b7 100644 --- a/assets/styles/spec.css +++ b/assets/styles/spec.css @@ -249,3 +249,31 @@ text { opacity:0.8; text-align:right; } +.example { + background: none repeat scroll 0 0 #fcfcfc; + border-color: #c0c0c0; + border-left: 0.25em solid #c0c0c0; + color: #222222; + display: block; + margin-left: 1em; + padding-bottom: 0.5em; + padding-left: 1em; +} + +div.example:before { + content: "Code Example: "; + font-weight: bolder; +} + +p.note { + background: none repeat scroll 0 0 #e9fbe9; + border-color: #52e052; + border-left: 0.25em solid #52e052; + font-style:normal; + font-weight:normal; + font-size:medium; + color: #000000; + + +} +p.note:before {font-weight:bold;} \ No newline at end of file diff --git a/spec/custom/index.html b/spec/custom/index.html index 042acf68..178abf64 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -84,6 +84,7 @@

Table of Contents

  • Parsing Custom Elements
  • Custom Elements and ECMAScript 6
  • +
  • Custom Element Semantics
  • Appendix A: All Algorithms in One Diagram
  • Acknowledgements
  • @@ -215,6 +216,7 @@

    Enqueuing and Invoking Callbacks

    QUEUE, an element queue
    Output
    None
    +
    1. For each custom element ELEMENT in QUEUE:
        @@ -754,6 +756,53 @@

        Custom Elements and ECMAScript 6

      +

      Custom Element Semantics

      +

      The default semantics of a custom element is dependent upon the form in which it is instiantated:

      + +

      Custom Tag Semantics

      +

      By default a custom tag has no special meaning at all. It represents its children.

      +

      For example a custom tag, could be named taco-button but it does not express the semantics of a HTML button element simply due to its name. As instaniated a custom tag conveys a similar amount of semantics as a HTML div or span element. The addition of visual styling and scripted events to the taco-button could provide hints as to the semantics and expected interaction behaviours of the custom element for some users, but for the semantics to be formally expressed, developers must convey the role, states and properties of the element to browser APIs.

      +
      <!-- taco-button represents a span with a fancy name -->
      +<taco-button></taco-button>
      +
      +

      The addition of a tabindex attribute to the taco-button element provides interaction (the element is included in the focus order) and property/state semantics (it exposes information that it is focusable and if it currently has focus).

      +
      
      +<!-- taco-button represents a focusable span with a fancy name -->
      +<taco-button tabindex="0"></taco-button>
      +
      +

      The addition of a text label to the taco-button element provides an Accessible Name for the element.

      +
      
      +<!-- taco-button represents a focusable span with a fancy name and a text label -->
      +<taco-button tabindex="0">Eat Me</taco-button>
      +or
      +<taco-button tabindex="0" aria-label="Eat Me"></taco-button>
      +
      +

      The addition of keyboard event handlers to the taco-button element provides the means for keyboard users to operate the control, but does not convey the presence of the functionality.

      +

      The addition of in line event handlers are for demonstration purposes only. The event handlers could be added by the lifecycle callbacks imperatively, or maybe even not used at all.

      +
      
      +<!-- taco-button represents focusable span with a fancy name, a text label and button like event handling -->
      +<taco-button tabindex="0" onclick="alert('tasty eh?');" 
      +onkeypress="if(event.keyCode==32||event.keyCode==13){alert('tasty eh?');};">Eat Me</taco-button>
      +
      +

      The addition of an ARIA role="button" conveys the taco-button element's role semantics, which enables users to successfully interact with the control using the expected button interaction behaviours (pressing the space or enter keys to activate).

      +
      
      +<!-- taco-button represents a focusable button with a text label and button like event handling -->
      +<taco-button role="button" tabindex="0" onclick="alert('tasty eh?');" 
      +onkeypress="if(event.keyCode==32||event.keyCode==13){alert('tasty eh?');};">Eat Me</taco-button>
      +

      Type Extension Semantics

      +

      By default a type extension inherits the semantics of the element type it extends.

      +

      For example a type extension, could extend the HTML button element. As instaniated it would inherit the button element's name, role, states and properties, built in focus and keyboard interaction behaviours.

      +
      <!-- taco-button represents a button with an accesssible name of "Eat Me!" -->
      +<button is="taco-button">Eat Me!</taco-button>
      +
      +

      To provide the desired taco-button feature, all that is required is the addition of an event handler. The rest of the semantics and interaction behaviour are provided by the browser as part of its implementation of the button element.

      +
      <!-- taco-button represents a button -->
      +<button is="taco-button" onclick="alert('tasty eh?');">Eat Me!</taco-button>
      +
      +

      TO DO

      Appendix A: All Algorithms in One Diagram