帶有偽選擇器（和引導圖標）的 ASP.NET Core asp-fallback 標記助手

Question

我正在使用 ASP.NET Core 6，帶有<link>標簽助手的asp-fallback功能（我知道如何使用它，它對我來說效果很好）。

我也在使用 Bootstrap Icons library 。 我無法讓它與后備一起使用，因為它僅使用偽選擇器（ 示例）。

有沒有辦法使用偽選擇器的回退機制？ 如果沒有，是否有一些解決方法？

Answer 1

LinkTagHelper回退機制不支持偽選擇器。 repo上有一個跟蹤問題，所以它可能會在 v7 中修復。

在那之前，我正在使用WORKAROUND 。 我擴展了框架的后備代碼以考慮偽選擇器。

將此添加到 DOM：

@{
  var testClass          = "bi";
  var testPseudoSelector = "::before";
  var testProperty       = "font-family";
  var testValue          = "bootstrap-icons !important";
  var hrefFallback       = "/bootstrap-icons.css";
}
<meta name="x-stylesheet-fallback-test" content="" class="@testClass" />
<script>
  var scriptTag  = document.getElementsByTagName('SCRIPT');                      // this tag is "last" when browser gets here
  var metaTag    = scriptTag[scriptTag.length - 1].previousElementSibling;       // ...so meta tag immediately before is the one we want
  var metaStyles = document.defaultView && document.defaultView.getComputedStyle
    ? document.defaultView.getComputedStyle(metaTag, '@testPseudoSelector')      // here is the magic
    : metaTag.currentStyle;
  if (metaStyles && metaStyles['@testProperty'] !== '@testValue');
    document.write('<link rel="stylesheet" href="' + '@hrefFallback' + '" crossorigin="anonymous" />');
</script>

這與標簽助手所做的非常相似，除了它還考慮使用getComputedStyle(element, pseudoSelector) 覆蓋的::before偽選擇器。

我只需要一個庫（bootstrap-icons）的這種解決方法，但如果你發現你反復使用它，你可以將它重構為一個自定義標簽助手，例如PseudoSelectorAwareLinkTagHelper 。