小编Ars*_*ger的帖子

我有一个网站，内容会自动更改，如下所示。

但它不适用于 IOS 和 safari。

旋转在这里不起作用吗？或者我做错了什么？

如果这是 IOS 和 Safari 的问题，我怎样才能有一个后备文本，这样它就不会看起来是空的

#spin {
  color: red;
}

#spin:after {
  content: "";
  animation: spin 12s linear infinite;
}

@keyframes spin {
  0% {
    content: "Hello 1";
  }
  25% {
    content: "Hello 2";
  }
  50% {
    content: "Hello 3";
  }
  75% {
    content: "Hello 4";
  }
  100% {
    content: "Hello 5";
  }
}

<h1>
  Say a warm <br/> <span id="spin"></span>
</h1>

我正在构建一个小部件，为了避免 css 冲突，我将小部件 css 移到了 Shadow 根目录中。但即使如此，父网站的 CSS 样式也会影响小部件

注意到由于父网站上的这一行而发生了错误。

@media screen and (min-width: 768px) {
  body {
    font-size: 2rem;
  }
}

问题是，为什么父网站中的 body 属性会影响 Shadow root css。Shadow root的目的不就是为了避免这种冲突吗？

我怎样才能避免此类问题？

我试图避免 !important 但还有其他方法吗？

我对编程很陌生。我花了三天时间试图解决这个问题，因此我们将不胜感激。

我可以在 for 循环中访问 c​​lientID。（请查看下面代码中的最后一行）。我只能成功打印一个 ClientID。

我希望从该模块导出此客户端 ID，以便我可以在其他模块中使用它。

import { Configurations } from './models';

type MethodNames = 'init' | 'event';

export const DEFAULT_NAME = '_hw';

interface LoaderObject { 
    q: Array<[MethodNames, {}]>;
}

export default (
    win: Window,
    defaultConfig: Configurations,
    scriptElement: Element | null,
    render: (element: HTMLElement, config: Configurations) => void
) => {
 
    const instanceName =
        scriptElement?.attributes.getNamedItem('id')?.value ?? DEFAULT_NAME;
    const loaderObject: LoaderObject = win[instanceName];
    if (!loaderObject || !loaderObject.q) {
        throw new Error(
            `Widget didn't find LoaderObject`);
    }

    if (win[`loaded-${instanceName}`]) { …

我想让一个div看起来顺利，如下面的 GIF 所示。我认为这可以使用 CSS 动画来完成，但我以前从未研究过 CSS 动画。

如何使用CSS动画来实现呢？

body {
background:red;
}

.container  {
background:white;
padding:20px;
position: absolute;
bottom:20px;
left:45%;
border-radius:10px;
}

<div class="container">
This is magic!
</div>

我有以下代码行。没有 setTimeout，一切正常。当我启用setTimeout时，没有输出。

我做错了什么？

const PrintBox = ({posts,maximise,data}) => {
 if ((posts)&& posts.postType === "printplease"
 {
   setTimeout( function () { 
      return (
         <div>
           <h1>PrintPlease <h1>
         </div>
      )
   }, 6000);
 }   
}

现实世界的代码看起来与此非常相似。每个帖子的时间取决于当前帖子（每个帖子都会改变..）

const PrintBox = ({posts, maximise}) => {

if ((posts)&& posts.postType === "printplease") {
      setTimeout(function(){ 
       return ( <div>
             {(maximise === false)?
             (
              <div className="outerbox">
               <div>
                 <div className="container">
                   <Printbox
                     data ={data}
                     maximise ={maximise}
                   />
                </div>
               </div>
              </div>
             ) : (
             <div 
              className="outerbox outexpand">
              <div className= "container container-extend"
             >
               <Printbox
                 data ={data} …