Setting attributes on body

[willviles]

I'm trying to find a way to add a class to the body tag in a FastBoot targeted instance initializer.

Here's what I'd like to do:

export function initialize(owner) {
  // Get document from document service
  const document = owner.lookup('service:-document');

  // Add a className
  document.body.setAttribute('class', 'myClassName');

}

export default {
  name: 'add-class-to-body',
  initialize: initialize
};

setAttribute seems to work for elements other than the body tag, but not the body tag itself. Is there any reason why the body tag doesn't accept attributes? Or is it a case that any attributes added are overwritten during app init?

[mixonic]

@willviles The instance initializer bit seems distracting- You're not asking for anything in Ember to be changes correct?

The main thrust is that you cannot setAttribute on document.body in SimpleDOM. If that is true I expect it is a bug.

[willviles]

I cloned simple-dom and tested in a clean environment if I could setAttribute on document.body. That works fine 👍

So therefore, it must be Ember-related. This therefore, probably isn't the place to discuss it, but what I'm trying to do is check that Ember was rendered in FastBoot - but from the code running in the browser.

The only way I’ve managed to achieve it is by injecting a component with a class .fastbooted in a FastBoot-targeted instance initializer, then in a browser-targeted instance initializer, use Ember.$('.fastbooted').length > 0.

The reason for this is so I can achieve advanced management of my app loading ui.

[jasonmit]

@willviles Fastboot only parses out the body of what Ember renders server-side.

Relevant bits: https://github.com/ember-fastboot/fastboot/blob/3531dae325403e514755352af90dcde6e6b01c71/src/ember-app.js#L396 https://github.com/ember-fastboot/fastboot/blob/ff877c738fecc6e4d345c803f77418665a533f00/src/result.js#L37 https://github.com/ember-fastboot/fastboot/blob/ff877c738fecc6e4d345c803f77418665a533f00/src/result.js#L108 https://github.com/ember-fastboot/fastboot/blob/ff877c738fecc6e4d345c803f77418665a533f00/src/result.js#L116

I think we can close this and track inside of ember-cli-fastboot.

Cross linking with https://github.com/ember-fastboot/fastboot/issues/101

[mschinis]

I got bit by this too. setting attributes on the body tag doesn't work, but appending text, does.

Relevant stack overflow question by someone else; http://stackoverflow.com/questions/41985296/set-attribute-on-simpledom-element-in-ember-fastboot