add innerHTML within title of popuptemplate (arcgis-js-api 4.xx)

I have tried it stand alone like this:

myLayer.popupTemplate = { <---  have also tried defining this as popupShake
      title: function(feature) {
          let spl = document.createElement("span");
          spl.className = "name_plc";
          spl.innerHTML = "<span class='name_plc'></span>";

          return spl;
      }
    };

I have also tried it inline within the popuptemplate call (such as the content section, but title will not run even though documentation states it accepts strings and OR functions).

i.e.

         let popupShake = {
            outFields: ["*"],
           "title": function (feature){ <------------- breaks popup, but content below works
                let spl = document.createElement("span");
                spl.className = "name_plc";
                dlv.innerHTML = "<span class='name_plc'></span>";

                return spl;
           },
           "content": function (feature){
             let name_plc;
             let dlv = document.createElement("div");
             dlv.className = "popd";
             dlv.innerHTML = `<b><span class='name_plc'></span></b><br>ID: <span class="ida">${feature.graphic.attributes.id}</span><br> URL: <a href="${feature.graphic.attributes.url}" target="_blank">View</a> <br> Updated: ${feature.graphic.attributes.updated} <br>Grid_value: ${feature.graphic.attributes.grid_value}<br> Event Time: ${feature.graphic.attributes.eventTime}`;
              
             setTimeout(() => {
                getName();
             }, 20);
             ................

Solution

If what you want is to simply style the title, then what you can do is to re define esri-popup__header-title css class.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .disclaimer {
      font-size: 14px;
      font-style: italic;
      color: white;
      background-color: black;
    }
    .esri-popup__header-title {
      color: grey;
      background-color: whitesmoke;

      font-size: smaller;
      font-weight: lighter;
      font-style: italic;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      let author = 'by @cabesuon';

      const map = new Map({
        basemap: 'streets-navigation-vector'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 12,
        center: {
          latitude: 32.7353,
          longitude: -117.1490
        }
      });

      function toGraphic(lon, lat, ObjectID, title, addrs, url) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            url
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/'
        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/'
        )
      ];

      function popupContent (feature) {
        const div = document.createElement('div');
        div.innerHTML =
        `Address: ${feature.graphic.attributes.addrs}<br>` +
        `<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
        `<span class="disclaimer">${author}</span>`;
        return div;
      }

      const layer = new FeatureLayer({
        source: graphics,
        fields: [
          {
            name: 'ObjectID',
            alias: 'ObjectID',
            type: 'oid'
          }, {
            name: 'title',
            alias: 'title',
            type: 'string'
          }, {
            name: 'addrs',
            alias: 'addrs',
            type: 'string'
          }, {
            name: 'url',
            alias: 'url',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          content: popupContent,
          outFields: ['*']
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

If you want to full custom it, you can always play with css or/and javascript to change it all.

Take a look at next example, there I hide the header of the popup redefining esri-popup__header css style, and then add a simple header in the content.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .disclaimer {
      font-size: 14px;
      font-style: italic;
      color: white;
      background-color: black;
    }
    .esri-popup__header-title {
      color: grey;
      background-color: whitesmoke;

      font-size: smaller;
      font-weight: lighter;
      font-style: italic;
    }
    .esri-popup__header {
      display: none !important;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      let author = 'by @cabesuon';

      const map = new Map({
        basemap: 'streets-navigation-vector'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 12,
        center: {
          latitude: 32.7353,
          longitude: -117.1490
        }
      });

      function toGraphic(lon, lat, ObjectID, title, addrs, url) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            url
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/'
        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/'
        )
      ];

      function popupContent (feature) {
        const div = document.createElement('div');
        div.innerHTML =
        `<h2 class="esri-popup__header-title">${feature.graphic.attributes.title}<h2/>` +
        `Address: ${feature.graphic.attributes.addrs}<br>` +
        `<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
        `<span class="disclaimer">${author}</span>`;
        return div;
      }

      const layer = new FeatureLayer({
        source: graphics,
        fields: [
          {
            name: 'ObjectID',
            alias: 'ObjectID',
            type: 'oid'
          }, {
            name: 'title',
            alias: 'title',
            type: 'string'
          }, {
            name: 'addrs',
            alias: 'addrs',
            type: 'string'
          }, {
            name: 'url',
            alias: 'url',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          content: popupContent,
          outFields: ['*']
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>