Add Custom Elements to HTML #1343

chaals · 2018-04-07T10:07:09Z

This currently adds both autonomous custom elements, which are implemented in Webkit, Blink and Firefox, and customised built-in elements, apparently implemented in both Blink and Firefox.

See #1229, #1277 (This does currently include is=), #1337 (this PR restricts attributes to data-*)

This is pretty much ready for review, but not merge. It probably has linking errors, may have incomplete statements and other text bugs.

I will note the need for examples as a separate issue.

Chapters 2-3 normative stuff from the CE spec. Very WiP

Conversion to bikeshed/linking stuff. Possibly introducing some linking bugs to check when I'm mostly done :S

This file will need another round of this, but leaving it for now.

Notes: Split autonomous and customized built-in elements a bit This commit includes is=, despite the resolution of #1277 It also presupposes that #1337 is resolved for the more restrictive approach.

Add global/is to the attributes table Mark it, and customized built-ins, as under consideration for "at risk"

some editorial cleaning in global attributes section

custom elements could be considered an extensibility mechanism...

Certain to have missed people who deserved to be thanked. :(

split into the general piece and customized - if Firefox hasn't implemented them yet, they will be at risk for the 5.3 version.

Bikeshed won't build without fixing some errors

scottaohara · 2018-04-08T00:08:18Z

sections/dom.include

+  </li>
+
+  <li>a <dfn id="when-defined-promise-map">when-defined promise map</dfn>, mapping <a>valid custom element names</a>
+   to promises. It is used to implement the {{whenDefined}} method.</p>


closing </p> without opening?

scottaohara · 2018-04-08T00:23:34Z

sections/dom.include

+     <a href="#custom-element">custom elements</a> are <a>defined</a>. In this example,
+      we combine it with the <a>:defined</a> pseudo-class to hide a dynamically-loaded article's contents
+       until all the <a>autonomous custom elements</a> it uses are defined.</p>
+     <pre>


note to update this to xmp instead of pre

scottaohara · 2018-04-08T00:24:44Z

sections/dom.include

+
+       <div class="example">
+         <p>This can occur due to reentrant invocation of this algorithm, as in the following example:</p>
+         <pre>


pre to xmp so we don't have to escape < and >

scottaohara · 2018-04-08T00:35:23Z

sections/dom.include

+ super();
+}
+}
+</pre>


opened with an xmp closed with a /pre

scottaohara · 2018-04-08T00:36:18Z

sections/dom.include

+const image = new AutoEmbiggenedImage(15, 20);
+console.assert(image.width === 150);
+console.assert(image.height === 200);
+</pre>


closing /pre but no opening

scottaohara · 2018-04-08T00:42:59Z

sections/semantics-scriptings.include

+
+  In addition, <a>custom element constructors</a> should implement the following good practices:
+
+  <li>


missing the opening ul tag here?

(of those introduced by this commit)

prlbr · 2018-04-09T09:03:57Z

sections/semantics-scriptings.include

+  <dd>Supplied by the element's author (inherits from {{HTMLElement}})</dd>
+</dl>
+
+  An <a>autonomous custom element</a>'s' meaning is defined by its author. It <a>represents</a> its children.


There’s one ' too much.

prlbr · 2018-04-09T09:06:46Z

sections/semantics-scriptings.include

+      a <{tr}> already participates in the <a>table model</a>,
+      and a <{input/checkbox}> has defined behaviour and participates in form submission.
+
+      Since only existing table elements takes part in the <a>table model</a>,


Typo: the s at the end of “takes” should not be there.

prlbr · 2018-04-09T09:11:26Z

sections/semantics-scriptings.include

+    </li>
+
+    <li>
+      <p>They do not contain any <a>uppercase ASCII letters</a>, so user agent can always treat HTML elements ASCII-case-insensitively.</p>


I think it should be either “so the user agent can” or “so user agents can”.

prlbr · 2018-04-09T09:19:00Z

sections/semantics-scriptings.include

+
+  <dt>A list of <dfn>observed attributes</dfn></dt>
+
+  <dd>A <code>sequence&lt;DOMString&gt;</code> that is a list of attribute names. When any of the named attributes changes value, the <code>attributeChangedCallback</code> <a>custom element reaction</a> is


I’m not sure about this: Is the “s” at the end of “changes” in “When any of the named attributes changes value” correct? My feeling is that “any” goes with a plural here, so no “s” for the verb.

I went for "When any attribute in that list changes value"... since the callback runs once (and in my mind therefore singularly) for each such event.

@prlbr

Thank you @prlbr

fixing links, exporting definitions, hopefully fix multipage

siusin · 2018-04-10T16:02:13Z

sections/dom.include

@@ -678,6 +679,993 @@
  a linear transition of the element's prototype chain, from {{HTMLElement}} to a subclass, instead
  of a lateral one, from {{HTMLUnknownElement}} to an unrelated subclass.</p>

+<!-- startCEinsert @@ -->
+<section>


Please remove the <section> tags outside.

siusin · 2018-04-10T16:02:39Z

sections/acknowledgements.include

  Ronald Eddy jr.,
  Ryosuke Niwa,
  Sailesh Panchang,
+  Scottt Miles,


s/Scottt/Scott

siusin · 2018-04-10T16:15:13Z

sections/semantics-scriptings.include

+  ::These are entirely author-defined, extending {{HTMLElement}}
+  :<a>customized built-in Elements</a>
+  ::These extend elements that are already defined. <span class="note">This is typically to inherit some functionality.</span>
+


there should be space after each ':' or '::';

siusin · 2018-04-10T16:23:17Z

sections/semantics-scriptings.include

@@ -2035,3 +2035,318 @@
  and its flag reset.

 </section>


Ditto. Please remove these <section> tags.

Otherwise looks good to me.

links, typos, ...

chaals · 2018-04-11T08:47:27Z

except for the example that uses :defined - see #1329 - this is implemented in Firefox and Blink browsers.

chaals added 11 commits April 4, 2018 11:36

initial pieces

981a556

Chapters 2-3 normative stuff from the CE spec. Very WiP

cleaning up syntax

0788769

Conversion to bikeshed/linking stuff. Possibly introducing some linking bugs to check when I'm mostly done :S

first pass syntax conversion

b57b85f

This file will need another round of this, but leaving it for now.

Commit the element bits of custom elements

36d93d7

Notes: Split autonomous and customized built-in elements a bit This commit includes is=, despite the resolution of #1277 It also presupposes that #1337 is resolved for the more restrictive approach.

at risk, is= in attributes table

6949243

Add global/is to the attributes table Mark it, and customized built-ins, as under consideration for "at risk"

define is=,

9c3e92a

some editorial cleaning in global attributes section

update intro

470397d

custom elements could be considered an extensibility mechanism...

Merge branch 'master' into chaals-ce-bulk-1229

bb5b2c1

some thank yous

6d9079e

Certain to have missed people who deserved to be thanked. :(

thank yous

207a0cf

update changes

a42ae26

split into the general piece and customized - if Firefox hasn't implemented them yet, they will be at risk for the 5.3 version.

chaals added match reality better substantive not ready for merge labels Apr 7, 2018

chaals self-assigned this Apr 7, 2018

chaals requested review from brucelawson and scottaohara April 7, 2018 10:07

chaals added 6 commits April 7, 2018 12:34

fix syntax errors

d94dd02

Bikeshed won't build without fixing some errors

Fix link

928d603

fix link again

bd3a345

link fix

c794c16

update URN link

926e670

Fix link errors

7a3ad94

scottaohara reviewed Apr 8, 2018

View reviewed changes

linking fixes

ccd8aa5

Fix last link errors

0782888

(of those introduced by this commit)

prlbr reviewed Apr 9, 2018

View reviewed changes

chaals added 2 commits April 9, 2018 12:50

linking and grammar fixes

fc500d2

Thank you @prlbr

tweaks

aa48d97

fixing links, exporting definitions, hopefully fix multipage

siusin reviewed Apr 10, 2018

View reviewed changes

fixes for review

365feba

links, typos, ...

siusin merged commit a474314 into master Apr 11, 2018

plehegar pushed a commit that referenced this pull request Apr 11, 2018

Built by Travis-CI: a474314 Add Custom Elements to HTML (#1343)

870b790

chaals mentioned this pull request Apr 11, 2018

Custom Elements - what to do with is="" attribute on regular elements #1277

Closed

chaals removed the not ready for merge label Apr 11, 2018

chaals deleted the chaals-ce-bulk-1229 branch April 11, 2018 11:51

This was referenced Apr 17, 2018

Define CEReactions attribute #911

Closed

[Meta] merge custom elements #1229

Closed

chaals mentioned this pull request Apr 25, 2018

restrict custom attributes to data-* ? #1337

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Custom Elements to HTML #1343

Add Custom Elements to HTML #1343

chaals commented Apr 7, 2018

scottaohara Apr 8, 2018

scottaohara Apr 8, 2018

chaals Apr 8, 2018

scottaohara Apr 8, 2018

chaals Apr 8, 2018

scottaohara Apr 8, 2018

chaals Apr 8, 2018

scottaohara Apr 8, 2018

chaals Apr 8, 2018

scottaohara Apr 8, 2018

chaals Apr 8, 2018

prlbr Apr 9, 2018

chaals Apr 9, 2018

prlbr Apr 9, 2018

prlbr Apr 9, 2018

prlbr Apr 9, 2018

chaals Apr 9, 2018

siusin Apr 10, 2018 •

edited

Loading

siusin Apr 10, 2018

siusin Apr 10, 2018

siusin Apr 10, 2018

chaals commented Apr 11, 2018


		In addition, <a>custom element constructors</a> should implement the following good practices:

		<li>


		<dt>A list of <dfn>observed attributes</dfn></dt>

		<dd>A <code>sequence<DOMString></code> that is a list of attribute names. When any of the named attributes changes value, the <code>attributeChangedCallback</code> <a>custom element reaction</a> is

Add Custom Elements to HTML #1343

Add Custom Elements to HTML #1343

Conversation

chaals commented Apr 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siusin Apr 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaals commented Apr 11, 2018

siusin Apr 10, 2018 •

edited

Loading