Question

我已经与IONIC 4一起创建了一个新项目。一切正常，并且工作正常。但是，当我尝试将CSS应用于＃shadow-root 内部的元素时。

下面是我的HTML代码

<ion-item class="itm-pad" no-padding>
<p>Rajkumar</p>
<ion-buttons slot="start">
  <ion-button>
    <ion-icon slot="icon-only" name="funnel"></ion-icon>
  </ion-button>
</ion-buttons>
<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="search"></ion-icon>
  </ion-button>
</ion-buttons>
</ion-item>

请参阅下面的屏幕截图以了解此声明。在这里，我可以像往常一样将CSS应用于ion-buttons和p标签。但是不能将CSS应用于item-native内部的item-native和item-inner。

我已经搜索了这个问题，但是所有人都说了为什么要实现这个问题以及它的重要性。但是没有人解释将CSS应用于这些元素的确切过程。请检查并让我知道解决方法。

Answer 1

这是shadowDOM的力量和痛苦。

ShadoDOM的创建是为了允许HTML和CSS沙箱。

这意味着，如果要将HTML放在shadowDOM中，则还需要将CSS放在相同的shadowDOM中。如果您打算使用多层shadowDOM，则需要在每层中放置所需的CSS。

    @model  IEnumerable<ProductLogicViewModel>

<script type="text/javascript">

    $(document).on("click", "#update", function () {
        update($(this));
    });

    function update($this) {

        $.ajax({
        type: "POST",
        url: '@Url.Action("Update", "TimeManagement")',
        cache: false,
        data: JSON.stringify({ productLogicViewModel: $("#TimeManagementUpdateForm" + $this.data("formnumber")).serialize() }),
        success: function (data) {

            // do something
        }
       });
    }

</script>

<table class="table table-striped table-bordered table-list">
    <thead style="background-color:#337ab7; color:aliceblue">
        <tr>
            <th style="text-align: center;vertical-align: middle">Servis İsmi</th>
            <th style="text-align: center;vertical-align: middle">Abone Gönderim Tipi</th>
            <th style="text-align: center;vertical-align: middle">Tekil Gönderim Tipi</th>
            <th style="text-align: center;vertical-align: middle">Gönderim Saatleri</th>
            <th style="text-align: center;vertical-align: middle">Gönderim Günleri</th>
            <th style="text-align: center;vertical-align: middle">Gönderi Kısıtı</th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        @{ int formNumber = 0; }

        @foreach (var item in Model)
        {
            formNumber++;

            using (Html.BeginForm("Update", "TimeManagement", FormMethod.Post, new { @id = "TimeManagementUpdateForm" + @formNumber }))
            {
                <tr>
                    <td style="text-align: center;vertical-align: middle">
                        @Html.DisplayFor(modelItem => item.ProductText)
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        @Html.EnumDropDownListFor(modelItem => item.CmsAboneSendType, new { @class = "form-control" })
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        @Html.EnumDropDownListFor(modelItem => item.CmsTekilSendType, new { @class = "form-control" })
                    </td>
                    <td style="text-align: center;vertical-align: middle;max-width:100px;">
                        @Html.EditorFor(modelItem => item.DailyTimes, new { @class = "form-control" })
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        for (var i = 0; i < item.WeeklyDays.Count; i++)
                        {
                            @Html.CheckBoxFor(m => item.WeeklyDays[i].Checked)
                            @item.WeeklyDays[i].DayOfWeek
                        }
                    </td>
                    <td style="text-align: center;vertical-align: middle;max-width:100px;">
                        @Html.EditorFor(modelItem => item.WorkingHoursInterval, new { @class = "form-control" })
                    </td>
                    <td style="text-align: center;vertical-align: middle;max-width:100px;">

                        <button type="button" class="btn btn-primary btn-xs" id="update" title="Güncelle" data-formnumber="@formNumber">
                            <span class="glyphicon glyphicon glyphicon-edit"></span>
                        </button>

                    </td>
                </tr>
            }
        }

    </tbody>

</table>

在上面的示例中，由于shadowDOM是一个沙箱，因此如果[HttpPost] public ActionResult Update(ProductLogicViewModel productLogicViewModel) { // productLogicViewModel has empty values }放置在每个shadowRoot / shadowDOM内，则需要将自定义项放置。

最简单的方法是使用<link>标签。创建一个CSS文件，该文件仅定义您希望<my-el> #shadowRoot // Styles must go here <inner-el> #shadowRoot // styles must also go here <ion-button> <ion-icon slot="icon-only" name="search"></ion-icon> </ion-button> </inner-el> <ion-button> <ion-icon slot="icon-only" name="search"></ion-icon> </ion-button> </my-el>的外观，然后将<ion-button>添加到每个shadowDom中。

虽然我们希望有一种更简单的方法，但是在规范更改之前，这是使内部元素具有正确样式的最简单方法。

如何将自定义CSS应用于元素内部的影子DOM？

1 个答案: