build(docs-infra): improve directive selector rendering (#25768)

If the documentation contains a `@selectors` tag then the content of that
is used to describe the selectors of a directive.

Otherwise the selector string is split and each selector is listed as
a list item in an unordered list.

PR Close #25768

aio/src/styles/2-modules/_api-pages.scss

@@ -116,6 +116,15 @@
   .ngmodule-list {
     list-style: none;
     padding: 0;
+
+  .selector-list {
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin-bottom: 12px;
+      }
+    }
   }
 }
 

aio/tools/transforms/angular-api-package/tag-defs/selectors.js

@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'selectors'};
+};

aio/tools/transforms/templates/api/includes/selectors.html

@@ -1,19 +1,14 @@
 {%- if doc.selector %}
-<section class="selectors">
+<section class="selector-list">
   <h2>Selectors</h2>
-  <table class="is-full-width list-table selector-table">
+  {% if doc.selectors %}
-      <thead>
+    {$ doc.selectors | marked $}
-        <tr>
+  {% else %}
-          <th>Selector</th>
+  <ul>
-        </tr>
+    {%- for selector in doc.selectorArray %}
-      </thead>
+    <li><code>{$ selector $}</code></li>
-      <tbody>
+    {% endfor %}
-      {%- for selector in doc.selectorArray %}
+  </ul>
-      <tr class="selector">
+  {% endif %}
-        <td><code>{$ selector $}</code></td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
 </section>
 {% endif %}