Menu ▾ ▴

#1299 HTML5 custom element

Committed
closed
Neil Hodgson
scite (87) scintilla (295) properties (7) lexer (116) html (26)
5
2019-12-07
2019-06-25
Zufu Liu
No

https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts

The paragraph “A valid custom element name”:

PotentialCustomElementName ::=
    [a-z] (PCENChar)* '-' (PCENChar)*

basically a name with (only?) one hyphen.

Related

Bugs: #2128
Feature Requests: #1320

Discussion

  • Zufu Liu

    Zufu Liu - 2019-06-25

    Added empty checking.

     
    html-custom-element-2.diff

  • Zufu Liu

    Zufu Liu - 2019-06-25

    Simplified the constructor.

    Remaining issue: custom attributes inside custom elements still been colored as unknown attribute,
    They are used by WHATWG spec, HTML it self, but I seems can't find the definition in the spec.

     
    html-custom-element-3.diff

  • Neil Hodgson

    Neil Hodgson - 2019-06-28

    This appears to me to be lessening the usefulness of the lexer: if the user currently wants "my-checkbox" to be a known-good custom element in their work then they can add it to hypertext.elements. With this change, all custom elements are treated as known so there will be no highlighting of unwanted or incorrectly spelled custom elements.

    Example custom element "my-checkbox":

    <form action="..." method="...">
  <label><my-checkbox name="agreed"></my-checkbox> I read the agreement.</label>
  <input type="submit">
</form>

    "font-face-format" seems to show >1 "-" allowed. The patches are spreading out the custom element logic making it more difficult to understand - wrap it in a function: starts with lower case and only contains lower case and "-".

     

  • Zufu Liu

    Zufu Liu - 2019-06-29

    Cleaned the patch. SciTE added the is attribute.

     
    html-custom-element-4.diff
    scite-html-2.diff

  • Neil Hodgson

    Neil Hodgson - 2019-07-10
    • labels: --> scite, scintilla, properties, lexer, html
     

  • Neil Hodgson

    Neil Hodgson - 2019-07-10

    Committed the changes to SciTE properties files as [4e603a] and [fe063d].

     

    Related

    Commit: [4e603a]
    Commit: [fe063d]

  • Neil Hodgson

    Neil Hodgson - 2019-07-10

    The specification defines valid custom element names with They do not contain any ASCII upper alphas, ensuring that the user agent can always treat HTML elements ASCII-case-insensitively.. I interpret this as meaning that the custom element in HTML is case-insensitive and its the definition of the element that is case-sensitive. Thus the onlyLowerCase variable is not needed.

     

  • Zufu Liu

    Zufu Liu - 2019-07-10

    Rename onlyLowerCase to hasUpperCase (direct edit the patch).

    The EBNF don't include upper case alphas.

    A valid custom element name is a sequence of characters name that meets all of the following requirements:

    PotentialCustomElementName ::=
    [a-z] (PCENChar)* '-' (PCENChar)*
PCENChar ::=
    "-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
     

  • Zufu Liu

    Zufu Liu - 2019-07-10

    Fix the patch.

     
    html-custom-element-6.diff

  • Zufu Liu

    Zufu Liu - 2019-07-10

    Removed ASCII case checking.

    Screenshot is test following with Firefox and Chrome (all tag and attribute names been normalized to lower case):

    <html>
<head>
<title>Test custom tag</title>
</head>
<body>
<my-checkbox name="agreed"></my-checkbox> 
<my-CheckBox name="agreed"></my-CheckBox> 
<My-CheckBox name="agreed"></My-CheckBox> 
<My-Tag My-Name="agreed"></My-Tag>
</body>
</html>
     
    Thumbnail
    custom-element.png
    html-custom-element-7.diff

    • Neil Hodgson

      Neil Hodgson - 2019-07-10

      Shouldn't the IsLowerCase inside isHTMLCustomElement also be removed?

      The point of the listed element names "annotation-xml", ... is that they are used by SVG and MathML and thus should be avoided when choosing new custom element names. LexHTML.cxx leaves the choice of valid element names up to the application which can set up keywords for the particular version/view of HTML it wants. If it wants to allow MathML then it includes "annotation-xml" in the set of keywords alongside "annotation". Thus, reservedCustomElementTagNames isn't needed.

       

  • Zufu Liu

    Zufu Liu - 2019-07-11

    The IsLowerCase is required. Maybe other checks for validating following also required:
    "-" | "." | [0-9] | "_" | [a-z]

    <html>
<head>
<title>Test custom tag</title>
</head>
<body>
<my-checkbox name="agreed">my-checkbox</my-checkbox><br>
<my-CheckBox name="agreed">my-CheckBox</my-CheckBox><br>
<My-CheckBox name="agreed">My-CheckBox</My-CheckBox><br>
<_My-Tag My-Name="agreed">_My-Tag</_My-Tag>
</body>
</html>
     
    Thumbnail
    custom-element2.png
    html-custom-element8.diff

    • Neil Hodgson

      Neil Hodgson - 2019-10-17

      Why is the IsLowerCase required? There is a difference here between the name of the custom element and references to that name in HTML documents. Reemphasising:

      user agent can always treat HTML elements ASCII-case-insensitively

      The image is showing that "My-CheckBox" with an initial upper-case is seen as valid by the inspector so I don't understand the point you are making with it.

       

  • Zufu Liu

    Zufu Liu - 2019-07-12

    Fortunately, extra validating is not needed.
    Updated patch replace tag.empty() with tag.length() < 2.

    It's likely, ] is missing from setTagContinue (because only [ is present). This change is not included in the patch.

    <html>
<head>
<title>Test custom tag</title>
</head>
<body>
<my-checkbox name="agreed">my-checkbox</my-checkbox><br>
<my-CheckBox name="agreed">my-CheckBox</my-CheckBox><br>
<My-Check#![Box] name="agreed">My-Check#![Box]</My-Check#![Box]><br>
<_My-Tag name="agreed" My-Name="agreed">_My-_Tag</_My-Tag><br>
<#My-Tag name="agreed" My-Name="agreed">_My-#Tag</_My-Tag><br>
<!My-Tag name="agreed" My-Name="agreed">_My-!Tag</!_My-Tag><br>
<[_My-Tag] name="agreed" My-Name="agreed">_My-[]Tag</[_My-Tag]><br>
</body>
</html>
     

    Last edit: Zufu Liu 2019-07-12
    Thumbnail
    html-custom-element9-chrome.png
    html-custom-element9.diff
    Thumbnail
    html-custom-element9.png

  • Zufu Liu

    Zufu Liu - 2019-10-17

    It just check tag[0] is alpha (after MakeLowerCase()), fixed caseSensitive.

     
    html-custom-element9.diff

  • Neil Hodgson

    Neil Hodgson - 2019-11-02
    • Group: Completed --> Committed
     

  • Neil Hodgson

    Neil Hodgson - 2019-11-16

    Committed case sensitivity fix as [11b480] .

     

    Related

    Commit: [11b480]

  • Neil Hodgson

    Neil Hodgson - 2019-12-07
    • status: open --> closed
     

Log in to post a comment.