Web组件和影子根

Question

我使用此代码创建一个Web组件，我使用模板：

struct MarketStruct : Decodable {
    let id                    : String
    let name                  : String
    let category              : String
}

var myMarkets = [MarketStruct]()
var categorieNames = [String]()
var categorieArray = [[String]]()

let jsonString = """
[{"id":"1", "name":"Apple", "category":"Fruits"},
 {"id":"2", "name":"Pie", "category":"Fruits"},
 {"id":"3", "name":"Tomato", "category":"Vegetable"}]
""" 

let data = Data(jsonString.utf8)

do {
    myMarkets = try JSONDecoder().decode([MarketStruct].self, from: data)
    let categorieNames = Array(Set(myMarkets.map { $0.category }))

    for categoryName in categorieNames {
        let categories = myMarkets.filter({$0.category == categoryName}).map({$0.name})
        categorieArray.append(categories)
    }
    print(categorieArray)

} catch { print(error) }

但是在控制台的影子根中，我看到的内容不一样了：

Answer 1

它与Shadow DOM或Custom Element无关。

实际上，普通DOM会发生同样的行为：您无法在<div>元素中插入<p>元素。后者只接受措辞内容。

请参阅问题：Why <p> tag can't contain <div> tag inside it?