Cannot select attributes in CSS using custom namespaces.

glimmerjs / glimmer-vm

MIT License

1.13k stars 190 forks source link

Cannot select attributes in CSS using custom namespaces. #476

Open chriseppstein opened 7 years ago

chriseppstein commented 7 years ago

Attributes from an xml namespace are not set in that namespace. I didn't test whether elements are. But the bottom line is I think this should work:

Test Case

`index.html`

<!DOCTYPE html>
<html xmlns:foo="http://foo.com/">
  <body>
    {{content-for "body"}}
  </body>
</html>

`components/foo/template.hbs`

<div foo:bar>
  <h1>Welcome to Glimmer!</h1>
</div>

styles/app.css

@namespace foo url(http://foo.com/);
[foo|bar] { font-style: italic; }

Implementation Details

I know literally nothing about the Glimmer VM, but my assumption is that it isn't using the Namespace aware DOM methods like getAttributeNS and setAttributeNS. I suspect this may be an issue for elements in a custom namespace but I haven't tested it. It may also affect mathml and svg attributes in a more general way when it comes to applying CSS to them.

I also suspect that glimmer will need some config to know what namespace a prefix is in -- parsing the index.html doesn't seem tenable in a generic way.

krisselden commented 7 years ago

Namespace urls are not a HTML5 thing, the glimmer only uses those interfaces to set SVG attributes during tree construction, just like HTML5. Otherwise a prefix is just treated opaque part of the attribute name.

http://w3c.github.io/html/syntax.html#creating-and-inserting-nodes

wycats commented 7 years ago

@krisselden another way of saying that is that Glimmer attempts to implement a spec-compliant HTML5 tree builder, which does not support arbitrary namespaces. If you tried to put exactly the same content in an HTML5 file, you'd see that the browser parses is the same way (without namespace-aware element and attribute creation).

chriseppstein commented 7 years ago

@wycats but that's not what I saw when I put the exact same syntax in my browser. When I did this as a stand alone HTML file my namespaced CSS selectors matched and with glimmer they didn't. On Fri, May 12, 2017 at 9:46 AM Yehuda Katz notifications@github.com wrote:

@krisselden https://github.com/krisselden another way of saying that is that Glimmer attempts to implement a spec-compliant HTML5 tree builder, which does not support arbitrary namespaces. If you tried to put exactly the same content in an HTML5 file, you'd see that the browser parses is the same way (without namespace-aware element and attribute creation).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/glimmerjs/glimmer-vm/issues/476#issuecomment-301127747, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAHL-NMyRxW5mdSLeBe8761-ATANjSQks5r5IzfgaJpZM4NP_K6 .

krisselden commented 7 years ago

http://jsbin.com/yezuwareti/edit?html,css,js,console,output

chriseppstein commented 7 years ago

Hmmm. Maybe my test lacked the doctype. 😅