       }
     ]
   "tag-name-custom-html":
-    begin: "<(for|if|unless|else-if|else|var|assign|macro|invoke|include|app|[a-zA-Z0-9_]+[-:][a-zA-Z0-9\\-_:]+)(?=(>|/>|\\s|\\())"
-    beginCaptures:
-      "1":
-        name: "support.function.marko-tag"
+    begin: "<(for|if|unless|else-if|else|var|assign|macro|invoke|include|app|[a-zA-Z0-9_]+[-:][a-zA-Z0-9\\-_:]*)(?=(>|/>|\\s|\\())"
+    beginCaptures:
+      "1":
+        name: "support.function.marko-tag.html"
     comment: "The beginning of a custom/special HTML tag"
     end: "</(\\1)>|</>|/>"
     endCaptures:
       "1":
-        name: "support.function.marko-tag"
+        name: "support.function.marko-tag.html"
     patterns: [
       {
         include: "#attr-stuff"

    begin: "<(([a-zA-Z0-9_-]+)[#.][a-zA-Z0-9_#.:-]+)(?=(>|/>|\\s|\\())"
    beginCaptures:
      "1":
        name: "support.function.marko-tag"
    comment: "HTML style tag"
    end: "</(\\1)>|</(\\2)>|</>|/>"
    endCaptures:
      "1":
        name: "support.function.marko-tag"
      "2":
        name: "support.function.marko-tag"
    patterns: [
      {
        include: "#attr-stuff"

    begin: "^(\\s*)(style)(?=(\\s|$|\\())"
    beginCaptures:
      "2":
        name: "entity.name.tag.style.marko.concise"
    comment: "style tag with CSS code."
    end: "^(?!(\\1\\s)|\\s*$)"
    name: "meta.tag.other"
