What's the trick to add custom head element like <atom-styles>


#1

I’d like to implement a similar style management system to the <atom-styles> in my project. But when I render my page with my own custom element in the head tag, the parser pushes it down into the body element.
So where should I look to find the trick to create a custom element that the head tag would accept?
Thanks


#2

perhaps illustrating the problem would help. So basically, my electron browserwindows load URLs from a remote template engine implemented in Go. Here is the source HTML in response to the call to loadURL() :

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta uiid=1493243823701900919>
      <script type="text/javascript" src="http://ui/files/components/jquery-3.1.1.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
      <link rel='preload'  href='/files/HTML/UiElements.html' pr="1.0">
      <link rel='import' href='/files/HTML/ui-window.html'>
      <ui-styles>
         <style style-path="/files/Themes/Default/Theme.less"></style>
         <style style-path="/files/Themes/Default/ui_structure.css"></style>
      </ui-styles>
</head>
<body>
   <ui-dock uiid=1493243823701905536 axis=row></ui-dock>
   <ui-foot></ui-foot>
</body>
</html>

All my <ui-elements> are defined in the import link for UiElements.html
But once rendered, the <ui-styles> is not in the head anymore but in the body:

<html>
<head>
    <meta charset="utf-8">
    <meta uiid="1493243823701900919">
    <script type="text/javascript" src="http://ui/files/components/jquery-3.1.1.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
    <link rel="preload" href="/files/HTML/UiElements.html" pr="1.0">
    <link rel="import" href="/files/HTML/ui-window.html">
</head>
<body>
    <ui-styles>
        <style style-path="/files/Themes/Default/Theme.less"></style>
        <style style-path="/files/Themes/Default/ui_structure.css"></style>
    </ui-styles>
    <ui-dock uiid="1493243823701905536" axis="row"></ui-dock>
    <ui-foot></ui-foot>
</body>
</html>

I played around with the link ‘rel’ attribute to no avail, thinking UiElements.html might not be loaded when the ui-styles is being rendered.
Do you have any idea what causes this behaviour?

On a side note, I can select the ui-styles object in devtool and append it to head element no problem.