From 7be4d5e8c2054d895f2082e4532a4a938e30a1a3 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 09:20:03 +0000 Subject: [PATCH 1/9] custom element semantics --- spec/custom/index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/spec/custom/index.html b/spec/custom/index.html index 042acf68..631ee170 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,14 @@

        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:

      +
        +
      • by default a custom tag has no special meaning at all. It represents its children.
        • +
      • by default a type extension inherits the semantics of the element type it extends.
        • +
      +

      For example a custom tag, could be named 'super-button' but it does not express the semantics of a 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

      +
      <super-button></super-button>

      Appendix A: All Algorithms in One Diagram

      From 8e3ead182f28b0a157b5093d1a922da9d5d02888 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 09:23:44 +0000 Subject: [PATCH 2/9] added link --- spec/custom/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 631ee170..27017e2c 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -762,8 +762,9 @@

      Custom Element Semantics

    2. by default a custom tag has no special meaning at all. It represents its children.
    3. by default a type extension inherits the semantics of the element type it extends.
      4. -

      For example a custom tag, could be named 'super-button' but it does not express the semantics of a 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

      +

      For example a custom tag, could be named 'super-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

      <super-button></super-button>
      +

      TO DO

      Appendix A: All Algorithms in One Diagram

      From 99ef4377dbc97a77ae432ec7acb5cdf815fc6b33 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 09:31:48 +0000 Subject: [PATCH 3/9] added text to code example --- spec/custom/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 27017e2c..0240dd23 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -762,8 +762,9 @@

      Custom Element Semantics

    4. by default a custom tag has no special meaning at all. It represents its children.
    5. by default a type extension inherits the semantics of the element type it extends.
      6. -

      For example a custom tag, could be named 'super-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

      -
      <super-button></super-button>
      +

      For example a custom tag, could be named super-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.

      +
      <!-- super-button is a span with a fancy name -->
+<super-button></super-button>

      TO DO

      Appendix A: All Algorithms in One Diagram

      From d8f461280e7dd719e822b9909c70938e7ff25f66 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 09:36:42 +0000 Subject: [PATCH 4/9] chnaged example name to taco-button --- spec/custom/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 0240dd23..7ec8bc55 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -762,9 +762,9 @@

      Custom Element Semantics

    6. by default a custom tag has no special meaning at all. It represents its children.
    7. by default a type extension inherits the semantics of the element type it extends.
      8. -

      For example a custom tag, could be named super-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.

      -
      <!-- super-button is a span with a fancy name -->
-<super-button></super-button>
      +

      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.

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

      TO DO

      Appendix A: All Algorithms in One Diagram

      From 2cfbaac113cf72e0b94878957222f319b46caa19 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 11:13:25 +0000 Subject: [PATCH 5/9] filling out example --- spec/custom/index.html | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 7ec8bc55..f4d86230 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -762,9 +762,25 @@

      Custom Element Semantics

    8. by default a custom tag has no special meaning at all. It represents its children.
    9. by default a type extension inherits the semantics of the element type it extends.
      10. -

      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.

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

      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 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>
+
+<!-- taco-button represents a focusable span with a fancy name -->
+<taco-button tabindex="0"></taco-button>
+
+<!-- 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>
+
+<!-- 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>
+
+<!-- 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>

      TO DO

      Appendix A: All Algorithms in One Diagram

      From caba906f2cd40c8fbeec5f1a1e6969348affe5f9 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 16:36:37 +0000 Subject: [PATCH 6/9] filled out the examples --- spec/custom/index.html | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index f4d86230..8e857317 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -762,26 +762,46 @@

      Custom Element Semantics

    10. by default a custom tag has no special meaning at all. It represents its children.
    11. by default a type extension inherits the semantics of the element type it extends.
      12. -

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

      +

      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.

      +
       <!-- 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>
      -

      TO DO

      +

      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

      From 6b342b3643e8b7fb11cc2ec760d2cdd60ae80767 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 16:37:42 +0000 Subject: [PATCH 7/9] code style --- spec/custom/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 8e857317..1194cd43 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -793,7 +793,7 @@

      Custom Tag Semantics

      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.

      +

      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>
      From 80bafaba45c8c04153fc8c83a609c025687f4d77 Mon Sep 17 00:00:00 2001 From: steve faulkner Date: Mon, 8 Dec 2014 16:57:54 +0000 Subject: [PATCH 8/9] added code style --- spec/custom/index.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/spec/custom/index.html b/spec/custom/index.html index 1194cd43..2fd51807 100644 --- a/spec/custom/index.html +++ b/spec/custom/index.html @@ -765,41 +765,41 @@

      Custom Element Semantics

      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>
+
      <!-- 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>
+<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>
+<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.
      
-
      +
      
 <!-- 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>
+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>
      
+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>
+
      <!-- 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>
+
      <!-- 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
      

From 3728645e5bc192c29a05d6b8a5086fc995c78929 Mon Sep 17 00:00:00 2001
From: steve faulkner 
Date: Mon, 8 Dec 2014 17:17:26 +0000
Subject: [PATCH 9/9] added pretty code css

added note about event handlers
---
 assets/styles/spec.css | 28 ++++++++++++++++++++++++++++
 spec/custom/index.html |  1 +
 2 files changed, 29 insertions(+)

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 2fd51807..178abf64 100644
--- a/spec/custom/index.html
+++ b/spec/custom/index.html
@@ -781,6 +781,7 @@ 
      Custom Tag Semantics
      
 <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?');"