Angular Elements将HTML全部放在同一行上可能是因为默认情况下它会使用压缩模式进行输出。要解决这个问题，可以通过以下两种方法来格式化输出的HTML代码。

方法1：使用pretty-html插件

1. 首先，安装pretty-html插件。可以通过运行以下命令来安装：

   npm install --global pretty-html
   

2. 在Angular Elements构建输出的HTML文件上运行pretty-html命令。例如，如果输出的文件名为index.html，则可以运行以下命令来格式化代码：

   pretty-html index.html
   

   这将会在终端中输出格式化后的HTML代码。

   注意：如果不希望在终端中输出结果，可以使用pretty-html -o formatted.html index.html命令将结果保存到一个新的文件formatted.html中。

方法2：使用prettier进行格式化

1. 首先，安装prettier。可以通过运行以下命令来安装：

   npm install --global prettier
   

2. 创建一个名为.prettierrc的文件，并在其中定义格式化选项。例如，可以在.prettierrc文件中添加以下内容：

   {
     "printWidth": 120,
     "tabWidth": 2,
     "singleQuote": true,
     "trailingComma": "all",
     "arrowParens": "avoid"
   }
   

   这里只是给出了一些常用的格式化选项，你可以根据需要进行调整。

3. 运行prettier命令来格式化输出的HTML代码。例如，如果输出的文件名为index.html，则可以运行以下命令来格式化代码：

   prettier --write index.html
   

   这将会直接在原始文件上进行修改，将HTML代码格式化为多行。

注意：以上两种方法都需要在构建输出的HTML文件上运行相应的命令来进行格式化。确保在使用这些命令之前已经完成了Angular Elements的构建过程。