admin/kiss-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6b35525207a06a3024451f372b520e7d4ef8aeeb
kiss-translator/public/content.html

265 lines
5.7 KiB
HTML
Raw Normal View History

add codes
2023-07-20 13:45:41 +08:00
<!DOCTYPE html>
<html lang="en">
task pool
2023-08-04 16:05:14 +08:00
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>%REACT_APP_NAME%</title>
<style>
img {
width: 1.2em;
height: 1.2em;
}
add codes
2023-07-20 13:45:41 +08:00
task pool
2023-08-04 16:05:14 +08:00
svg {
max-width: 1.2em;
max-height: 1.2em;
}
</style>
</head>
add codes
2023-07-20 13:45:41 +08:00
task pool
2023-08-04 16:05:14 +08:00
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
add codes
2023-07-20 13:45:41 +08:00
<h2>React is a JavaScript library for building user interfaces.</h2>
fix shadow dom
2023-08-24 14:57:54 +08:00
<div id="addtitle"></div>
support shadow dom
2023-08-23 17:53:46 +08:00
<h2>Shadow 1</h2>
<div id="shadow1"></div>
task pool
2023-08-04 16:05:14 +08:00
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
support shadow dom
2023-08-23 17:53:46 +08:00
<h2>
React Server Components (or RSC) is a new application architecture
designed by the React team.
</h2>
<iframe
id="iframe1"
width="800px"
height="600px"
src="http://localhost:3000/index.html"
></iframe>
task pool
2023-08-04 16:05:14 +08:00
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
support shadow dom
2023-08-23 17:53:46 +08:00
<h2>
We’ve first shared our research on RSC in an introductory talk and an
RFC.
</h2>
<h2>Shadow 2</h2>
<div id="shadow2"></div>
task pool
2023-08-04 16:05:14 +08:00
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
support shadow dom
2023-08-23 17:53:46 +08:00
<h2>
To recap them, we are introducing a new kind of component—Server
Components—that run ahead of time and are excluded from your JavaScript
bundle.
</h2>
<iframe
id="iframe2"
width="800px"
height="600px"
src="https://react.dev/"
></iframe>
task pool
2023-08-04 16:05:14 +08:00
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="cont cont1">
support shadow dom
2023-08-23 17:53:46 +08:00
<h2>
Server Components can run during the build, letting you read from the
filesystem or fetch static content.
</h2>
task pool
2023-08-04 16:05:14 +08:00
<ul>
<li>
support shadow dom
2023-08-23 17:53:46 +08:00
They can also run on the server, letting you access your data layer
without having to build an API. You can pass data by props from
Server Components to the interactive Client Components in the
browser.
task pool
2023-08-04 16:05:14 +08:00
</li>
<li>以声明式编写 UI，可以让你的代码更加可靠，且方便调试。</li>
</ul>
</div>
support shadow dom
2023-08-23 17:53:46 +08:00
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
task pool
2023-08-04 16:05:14 +08:00
<div class="cont cont2">
<h2>
support shadow dom
2023-08-23 17:53:46 +08:00
Since our last update, we have merged the React Server Components RFC
to ratify the proposal.
task pool
2023-08-04 16:05:14 +08:00
</h2>
<ul>
<li>
support shadow dom
2023-08-23 17:53:46 +08:00
RSC combines the simple “request/response” mental model of
server-centric Multi-Page Apps with the seamless interactivity of
client-centric Single-Page Apps, giving you the best of both worlds.
task pool
2023-08-04 16:05:14 +08:00
</li>
<li>
React 使创建交互式 UI
变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React
能高效更新并渲染合适的组件。
</li>
<li>以声明式编写 UI，可以让你的代码更加可靠，且方便调试。</li>
</ul>
</div>
add codes
2023-07-20 13:45:41 +08:00
</div>
task pool
2023-08-04 16:05:14 +08:00
<!--
add codes
2023-07-20 13:45:41 +08:00
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
support shadow dom
2023-08-23 17:53:46 +08:00
<script>
fix shadow dom
2023-08-24 14:57:54 +08:00
setTimeout(function () {
for (var i = 1; i <= 2; i++) {
var shadow = document.querySelector("#shadow" + i);
var cont = document.querySelector(".cont" + i);
var root = shadow.attachShadow({ mode: "open" });
// root.appendChild(document.importNode(cont, true));
root.appendChild(cont.cloneNode(true));
var newLine = document.createElement("p");
newLine.innerText = "new line";
root.appendChild(newLine);
}
}, 3000);
</script>
<script>
setTimeout(function () {
var el = document.querySelector("h2");
el.innerText = "hello world";
var title = document.querySelector("#addtitle");
title.innerHTML = "<p>second title</p>";
}, 1000);
support shadow dom
2023-08-23 17:53:46 +08:00
</script>
task pool
2023-08-04 16:05:14 +08:00
</body>
</html>
Reference in New Issue Copy Permalink